PDA

View Full Version : Div dosn't expand



CaptainB
Mar 6th, 2008, 05:02 PM
Hi,

If you look at this layout in IE6 everything is fine. However in FF it looks like this (See pic):

The div 'Container' does abviously not expand as it should, as all the other divs are placed in it. I've validated the xhtml and css, but with no errors.

Could anybody shead some light on this?

xhtml:

<div id="container">
<div id="main_top_cnr"></div>
<div id="header">
Header
</div>
<div id="innercontainer">
<div id="left">
<div class="leftcontent">
<ul>
<li>Menu item 1</li>
<li>Munu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
</ul>
</div>
<div class="leftcontent">
News
</div>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus pede libero, semper id, pellentesque quis, rhoncus eu, leo. Vivamus tristique dui id lectus. Pellentesque eget dolor. Quisque arcu est, volutpat nec, feugiat in, adipiscing eget, diam. Vivamus tincidunt magna sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Suspendisse potenti. Vivamus metus neque, euismod sit amet, porta quis, faucibus non, dui. Ut molestie, felis at aliquam vestibulum, neque nisl sodales velit, imperdiet blandit diam ante et pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>

<p>Phasellus id tellus quis ante feugiat vulputate. Pellentesque enim. Sed placerat, justo quis luctus ornare, nunc mauris accumsan nunc, et rutrum felis risus at libero. Nulla elit urna, imperdiet et, tempus eget, ultricies a, metus. Fusce imperdiet egestas felis. Curabitur consequat metus ac velit. Sed turpis purus, tincidunt ut, laoreet quis, vehicula at, mi. Quisque suscipit risus nec dui. Donec quis tortor. Suspendisse potenti. Proin euismod velit id elit. Etiam ut ante sit amet est hendrerit pellentesque. Nulla volutpat ligula sit amet justo. Praesent porttitor justo sagittis nunc. Sed nec enim sit amet ipsum blandit faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas suscipit auctor justo. Phasellus sem eros, egestas id, dignissim in, volutpat nec, felis. Duis orci. Quisque quis mi ut pede auctor ullamcorper. Proin vitae diam ullamcorper nibh suscipit egestas. Nulla lacus massa, sagittis a, sollicitudin euismod, commodo id, diam. Curabitur volutpat. Maecenas scelerisque lectus et quam. Praesent tristique, eros a iaculis mollis, orci nulla ullamcorper risus, vitae porttitor pede ipsum a libero. </p>

</div>
</div>
<div id="main_bottom_cnr"></div>
</div>

css:

* { margin:0px;
padding:0px;
}

body { background-color:#99aa88;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000;
}

p { margin-bottom:10px;
}

ul { list-style:none;
}

li { display:block;
}

#container { background-color:#e6e8e5;
width:920px;
margin:80px auto;
}

#innercontainer {width:900px;
margin:10px auto;
}

#header { background-color:#333;
margin:10px auto;
width:900px;
height:200px;
}

#left { width:200px;
float:left;
margin-right:10px;
}

.leftcontent { background-color:#ccc;
width:180px;
margin-bottom:10px;
padding:10px;
}

#content { background-color:#ccc;
width:670px;
float:left;
padding:10px;
}

#main_top_cnr { background-image:url(main_top_corner.png);
background-repeat:no-repeat;
background-color:#e6e8e5;
width:920px;
height:10px;
}

#main_bottom_cnr {background-image:url(main_bottom_corner.png);
background-repeat:no-repeat;
background-color:#e6e8e5;
width:920px;
height:10px;
}

_Aerospace_Eng_
Mar 6th, 2008, 05:22 PM
You need to clear your floats. http://positioniseverything.net/easyclearing.html

This is a common mistake beginners make.

CaptainB
Mar 6th, 2008, 06:03 PM
Ah, the damn floats..

But, I read that I could add this to my container to clear the floats (the NEW method):


overflow:auto;
width:100%;

However, what if I have already specified a width in px to that container, and don't want it to be 100% width? How would I then clear em? With the clear:both; method?

VIPStephan
Mar 6th, 2008, 06:13 PM
You don’t need a width of 100&#37;, you can have any width and still apply that overflow to clear a float. However, note that with a fixed width it may be possible to actually activate the overflow behavior if some content is wider and can’t wrap. Also, any dynamic behavior that goes outside of that element will trigger the overflow behavior.

Anyway, I haven’t looked at your code but be aware that this overflow clearing is not meant to replace the regular clear: left/right method, it’s just to save a clearing element within boxes that are supposed to wrap floated elements. FYI: You can also clear such floats by floating the parent element as well which is called containing float (http://complexspiral.com/publications/containing-floats/).

CaptainB
Mar 6th, 2008, 06:37 PM
I tried to just apply overflow:auto; to the container, but without luck.

I looked at your link, which suggests that you add a with of over 50% to the divs in order to get them to stack vertically. However, as with the container, I have applied a width in px to the rest of the divs too, so that's not an option.

I guess I would have to use the empty div method, though I would have liked to avoid it.

Any more help would be appriciated if you have other ideas.

_Aerospace_Eng_
Mar 6th, 2008, 06:45 PM
Read the link I gave you. It gives you the solution without having to use an empty div.

CaptainB
Mar 6th, 2008, 11:23 PM
Got it, bookmarked it and made it work.

However, I still have a problem. See, the bottom div with the rounded corners dosn't seem to sit at the bottom of the layout as I've specified in the code. It sits right below the header div, and fills up the 10px margin, which should be between the header and the content.

I have a suspect that it's closing the divs at a wrong time, but I'm not certain. Any clues?

abduraooft
Mar 7th, 2008, 07:45 AM
I have a suspect that it's closing the divs at a wrong time, but I'm not certain. Any clues? Could you explain a little more?

CaptainB
Mar 7th, 2008, 07:59 AM
Well, I'm not sure about it. But I think the container div might be closing itself and just wrap the header instead of the rest of the content too. If you look at the page in FF, then you'll see the problem: http://behrentzs.com/sites/htx/

It could also be another error, but I don't know what's causing it.

_Aerospace_Eng_
Mar 7th, 2008, 08:04 AM
Get rid of the clearfix thing and add clear:both to #main_bottom_cnr. You may want to set the font-size and line-height to 0 for #main_top_cnr and #main_bottom_cnr for IE since it doesn't allow a height to be set smaller than the font-size.

CaptainB
Mar 7th, 2008, 01:09 PM
You are the man!