Problem with FLOAT
newbie
Location: Boulder, CO
Posted: Tue, 2008-05-20 12:23
Hey guys, I'm having a problem with float in Firefox (but not IE7). I have a <div> block element container that has two smaller floating (left and right) containers inside. The problem is that the floating containers don't actually stay inside the parent container. They sit ontop of it and if they are longer than the parent container, then they go outside of it.
Is there any way to keep the floating containers contained in the parent container so that if they become longer, the parent container accommodates their dimensions? I want it to appear as one big container that is flush along the bottom. Any suggestions would greatly help. Thanks!
Moderator
Posts: 5577
Joined: 2005-02-22
four methods: (1) put some
Posted: Tue, 2008-05-20 12:31
four methods:
(1) put some cleared inflow content after the floats
(2) clearfix (google for details), which is essentially a CSS way of doing (1)
(3) set overflow to a non default value on the container. This is safe (and my preferred method) when height doesn't need to be specified.
(4) float the container. This can get messy as you are simply moving the problem up a level. However it does have its uses.
(3) & (4) have the added advantage of isolating floats on different parts of the page from normal inflow content - that is avoiding unexpected clearing.
On Having Layout | The One True Layout | menus by listamatic
newbie
Posts: 2
Joined: 2008-05-20
Location: Boulder, CO
Hey Chris, thanks a lot for
Posted: Tue, 2008-05-20 12:39
Hey Chris, thanks a lot for the response. I'll definitely look into those methods. With regards to (3), how do you set overflow values in CSS?
Moderator
Posts: 5577
Joined: 2005-02-22
same as every other value,
Posted: Tue, 2008-05-20 13:33
same as every other value,
selector { overflow: value; }
where 'value' can be hidden, auto, scroll or visible. visible is default, ie. effectively 'off'.
On Having Layout | The One True Layout | menus by listamatic
Regular
Posts: 26
Joined: 2007-06-08
Location: San Diego
I would set the properties
Posted: Tue, 2008-05-20 17:32
I would set the properties for my container first:
#body {
margin:0px auto;
text-align:center;
}
#container {
width:800px;
margin:0px auto;
text-align:left;
}
Then, move onto the two elements inside of it. I assume you just want them [all 3 elements] to be flexible and stretch vertically so then I'd go onto this:
#left {
float:left;
width:400px;
}
#right {
float:left;
width:400px;
}
and add this after the second floating column, but inside the container:
.clear {
clear:both;
width:100%; /* safari fix */
height:.01em;
}
Then your html would be as simple as:
<body><div id="container">
<div id="left">[content]</div>
<div id="right">[content]</div>
<div class="clear"></div>
</div>
</body>
The clear will stop the floating and pull containing elements down to fit the content.
I hope that helps if ya didn't already get it