CSS Layout Help

[JSeverson]

Hi,
I'm trying to lay out a site with CSS, which I've done numerous times, but I've run into problems with a current layout and I just can't figure out what the issue is. Once the copy exceeds a certain length, the background color for the footer disappears and the borders on the left and right side do not extend to the full length of the page. When I add overflow:auto; to the container div, it fixes the problem but then I end up with scroll bars on that div.

All of the xhtml and css validate. And, oddly enough, IE6 is the only site it appears properly in. I'm sure it is something small that I'm just overlooking. Could someone take a look?

Page with full copy that breaks:
Full Copy

Page with partial copy that is correct:
Partial Copy

Thanks,

[jomariet]

You might want to add a Clear div to your style sheet and add it at the bottom of each floated element. I've found it works best if you add something to the div even a nbsp .

In your style sheet it would look like:
.clear {clear:both;}

just before the close of your floated division you would add:

<div class="clear">&nbsp;</div>

This has worked for me in similar situations.

JM

[darocha]

Hi JSeverson,

Here's the fix for your layout:

html, body, #container { height: auto; }
body { min-width:758px; }
#container
{
float:left;
position:relative;
margin-left:50%;
left:-379px;
margin-right:-758px;
}

First remove the height attribute from html, body and #container. IE7 and Firefox are not ignoring these rules, and they are indeed rendering as expected. however, they will not work for the layout you are trying to achieve.

Add a min-width to the body the same width as your #container. Then center align your #container div.

I can't tell what will happen with IE6 after you add these, the snippet above will fix the layout for IE7 and Firefox.

Clear won't work in this situation. You should use clear when you want to "CLEAR" other floated elements from the side of a particular element. Eg: You have a 2 floated div elements which are 100px wide each, inside another div element with width of 300px; The divs will render side by side. Then you could use 'clear:left' on the second element to so it will flow below the 1st element instead of its side.

Thanks,
Darocha

[hrvoje461]

Originally Posted by jomariet

You might want to add a Clear div to your style sheet and add it at the bottom of each floated element. I've found it works best if you add something to the div even a nbsp .

In your style sheet it would look like:
.clear {clear:both;}

just before the close of your floated division you would add:

<div class="clear">&nbsp;</div>

This has worked for me in similar situations.

JM

I think it is pretty simple solutions that works every time in situations when you hava a floating elements on your site.
I would also add min-height instead of height in your css file.

[JSeverson]

Thank you for the replies. I had actually tried the clear:both; method prior to posting here and it didn't seem to make a difference.

Darocha: That worked great. I would have never thought of that. It worked in IE7, Firefox, Opera and Safari. The only browser it didn't work in was IE6. It aligns the site all the way to the right. I had to use a hack, unfortunately, but was able to get it to work in IE6 as well.

Thanks again,