Topic: Small CSS problem (Page 1 of 1)

Ok, so I've painstakingly pieced this design together, but for some reason I have a div at the bottom above my footer called #fivebox which encloses 5 small content boxes. Everthing works fine but the background stops displaying behind it.

I for the life of my cannot figure out why, nor do I know how to search for a solution as I've never seen this before.

http://www.wayoutwestenterprises.com/clients/caicc/index.html
login: guest
pw: guest

Sorry for the login, it's to keep prying eyes out of my development folder.

Keep in mind, this is just my development stage. I'm totally open to changes I need to do if you see something awkward, or goofy looking. Especially with the CSS.

As always, very much appreciated.

Inside #fivebox, add a DIV with CSS clear:both. This DIV should be #fivebox's last child and should have a single space in it. Then, change #fivebox's margin-left:60px to padding-left:60px. Tested this using Firebug in Firefox 3, not sure about IE.

----------------------

#fivebox {
	margin: 0 !important;
	padding: 0 0 0 60px;
	overflow: auto;
	display: block !important;
	display: inline-block;
}

(Edited by reisio on 04-09-2009 20:52)

So I understand this correctly, I use the <div class="clear"></div> to remove the left float so the bg continues? I just wnat to make sure I grasp it so I can stop bugging you guys. :-)

It totally worked. Thanks!!

Floated items normally don't affect the vertical flow of the document, so the height of the container is basically set as if the floats didn't exist.
But the "clear" property specifies that an element can not be adjacent to a floated element.
If it's in the DOM after the floated element it will be displayed below the float rather than next to it.
So in that way you can get the float to affect the flow vertically.
The empty div with style="clear: both;" is a common way to prop up the height of an element containing floated elements.
It's also the basis for one of the "min-height" hacks for IE.

... :/

Hi reisio, :P
Not sure if you're upset at me, I just thought an explanation to accompany the code you guys gave would be good.
I explained the one because it's simpler to understand and it's usually fool proof.
I've never really seen a good explanation of why the overflow works (it's certainly unintuitive) and it can sometimes lead to other complications (such as scrollbars in some places when using auto), so I didn't touch it.

The renderer has to know the height of an element to know where to place a scrollbar should it need one, which forces containment.

Unwanted scrollbars are a side effect of not being aware of margins and padding (etc.) that exist, but you can always use 'hidden' instead of 'auto'. One place you'd pretty much always want to use 'hidden' is for a navigation ul, because things like Firefox's outline for last-clicked anchors do produce overflow.