1 person found this helpful
It's not an <hr> tag at all, it's your .gridcontainer collapsing due to floating your content within it. You can either remove all floats from the content within your .gridcontainer, or add the following css to your .gridcontainer class...
Monkeying around with your fluid grid css can cause unexpected results, so make sure you don't modify anything else.
Thank you sir.
Your response is exactly what I look for when in need of direction; short, concise, and professional.
Al Sparber (from PVII) has publicly expressed deep dissatisfaction with the FluidGrid Layouts in DW many times in this forum. So it's no surprise that you received the reply you did. It's not personal. It's just his opinion that nobody should use FGLayouts.
From personal experience with FGLayouts, you need to understand the underlying HTML & CSS media queries. If you don't, you'll get into trouble in a hurry. As Jon said, don't tamper with the temperamental FGLayout.css or boilerplate.css files. Use a separate, external style sheet for all your content styes.
My advice is to use the built-in boilerplate.css clearfix class on your floated divs. This will prevent the margin-collapse that you're experiencing.
Thank you Nancy.
As always, my interaction with this forum invariably leads to satisfactory conclusions. And, as I expressed in a private communication with PVII, I do not take it personal. However, I do reserve the right to respond outside the forum environment, whenever possible, at those few times I feel someone has overstepped the bounds of civil personal discourse, and express my displeasure at such times. If I am wrong, I can easily be ignored. If right, one might themselves modify their future interactions with their paying customer base.
As to your advice, in addition to Jon Fritz helpful answer, your informing me that the clear fix could be used on other floated divs, simple though it is, is something of which I was unaware. I will put that in my toolbox and use it.
Just to clarify, the clearfix class should be applied to your .gridContainer like this.
<div class="gridContainer clearfix">
In addition, you can use clearfix class on any floats that will require clearing at the end of them. An example would be the last <div> before your <footer>.
If you need further help with using clearfix, please provide a link to your test page and we can provide you with more specifics.
Thanks for the offer to review test site, located at:
Gallery SiteMap-> http://0343be5.netsolhost.com/MickeyHarrisArt/pages/artGalleries.html
Auto Art SiteMap-> http://0343be5.netsolhost.com/MickeyHarrisArt/pages/auto_truck.html
This is the basic structure of which I will follow throughout the entire exhibition.
After reviewing your previous suggestion, I took a look at the boilerplate, and something had been changed. I didn’t bother trying to figure out exactly what, but set a new site definition, created a new boilerplate, copied and pasted into my test site, and voila… all worked as I had previously desired. (This might well be a clumsy approach, but did so more on intuition than certainty.)
Note: Although I do know enough to avoid consciously poking around in boilerplate, I did use Modify/Page Properties to change link color set. Possible I may have made a mistake on late night mission.
On w3c validation of no errors, no warnings, a voice said to me STOP NOW. I didn’t have to use the overflow:hidden or <div class="gridContainer clearfix"> (though you may well suggest otherwise) but on checking the css, I see I chose to use as follows:
I used clear:both on this div ID. This I used on multiple divs on the Gallery SiteMap page, and I think your suggestion to use overflow: hidden on last div would (might) apply here. But I didn’t see anything unsettling as to appearance as is, but I would certainly like your guidance at this point.
#lftColumn I used clear :both (floated left, but this div ID currently unused)
#rtColumn I used clear: right (floated right, but this div ID currently unused)
Your general observations at to any bulk in the code, or any other obvious mistakes would of course be greatly appreciated. This is my first foray into responsive site, and I have found the forums help to be an invaluable asset. Tables and cells all seem so… distant and far, far in the past now.
Thank You, and all the other participating members, for the selfless giving of your time and expertise.
This is obsolete code. Links should be defined in your CSS, not your HTML.
Change it to this:
I think the amazing airbrushed car would look better centered on screen. Change your desktop CSS to this:
margin: 0 auto;
Otherwise, looking good!