Floated Divs Don't Float

Forum Moderators: not2easy

Message Too Old, No Replies

Floated Divs Don't Float

pab1953

2:42 pm on Oct 31, 2010 (gmt 0)

I have a page with a 600px Main Content area and a 300px-wide sidebar made up of four divs stacked on top of one another, each with a "float: right" command in their CSS -- but the sidebar divs don't float right. When the Main Content area is short enough, the bottom sidebar div (and sometimes the one above it as well) fly over to the left under the Main Content. It's as if the "float: right" command means nothing to them.

What am I doing wrong?

Major_Payne

9:32 pm on Oct 31, 2010 (gmt 0)

Floating elements removes them from the document flow and where they go depends on the space they have in their container to go where you want them to.

You need to post the HTML/CSS for better help.

milosevic

12:55 pm on Nov 1, 2010 (gmt 0)

pab1953, you have got all your floated columns etc inside a wrapper/container div with a width set on it?

pab1953

1:09 pm on Nov 1, 2010 (gmt 0)

milosevic, yes: #container {width: 950px; background: #fff; margin: 0 auto; text-align: left;}

rocknbil

3:58 pm on Nov 1, 2010 (gmt 0)

When the Main Content area is short enough, the bottom sidebar div (and sometimes the one above it as well) fly over to the left under the Main Content.

Here is what happening. As your container gets shorter, they are still floating, it's just they're floating up against the next div.

container ----------------------
----------------- right float
rightfloat-rightfloat-rightfloat
--------------------------------

You need an inner container, sidebar, and float ONLY that one, then leave the others unfloated.


<div id="container"> 
 <div id="sidebar"> <!-- float: right; width: yourwidth --> 
 <div class="sidebar-div"> 
 blah 
 </div> 
 <div class="sidebar-div"> 
 blah 
 </div> 
 <div class="sidebar-div"> 
 blah 
 </div> 
 <div class="sidebar-div"> 
 blah 
 </div> 
 </div> <!-- sidebar --> 
</div> <!-- container -->

Also watch out for the use of any clearing elements, these can cause floated items to pop below content unexpectedly.

pab1953

4:37 pm on Nov 1, 2010 (gmt 0)

Hmmm ... interesting, rocknbil.

When you say, "... watch out for the use of any clearing elements, these can cause floated items to pop below content unexpectedly" do you mean _don't_ use any clearing elements? I thought floats had to be cleared.

milosevic

4:50 pm on Nov 1, 2010 (gmt 0)

floats don't have to be cleared unless you want to keep heights of things consistent or to put something below your floated element on the page.

To be fair, I think we are getting two things confused in this debate - clearing, and clearfixing.

pab1953

6:44 pm on Nov 1, 2010 (gmt 0)

What is the difference between: clearing, and clearfixing?

rocknbil

4:24 pm on Nov 2, 2010 (gmt 0)

I thought floats had to be cleared.

Not always. If you use the "shrink wrap" approach, and carefully set widths, items following the floats will flow below them without needing a clearing element. The shrink wrap approach is that a floated div will expand to wrap around all floated children. So if you have a div and all the children inside it are floated, the outer div will contain all the children.

Scenario ("working code": )


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Untitled</title> 
<style type="text/css"> 
 body * { border: 1px solid #000; } /* so you can see what's up */ 
 #container { width: 608px; } /* had to stretch for the borders */ 
 #content-left,.inner-row { float: left; width:400px; } 
 #content-left * { float: left; } /* all children */ 
 .left-image{ width: 100px; height: 100px; } 
 #sidebar { width: 200px; float:right; } 
.sidebar-div { width: 200px; } /* note no float */ 
</style> 
</head> 
<body> 
<div id="container">  
 <div id="content-left"> 
 <div class="inner-row"> 
 <div class="left-image"><img src="someimage.gif" alt="test"></div> 
 <p> Some content here</p> 
 </div> <!-- inner-row --> 
 <div class="inner-row"> 
 <div class="left-image"><img src="someimage.gif" alt="test"></div> 
 <p> Some content here</p> 
 </div> <!-- inner-row --> 
 <div class="inner-row"> 
 <div class="left-image"><img src="someimage.gif" alt="test"></div> 
 <p> Some content here</p> 
 </div> <!-- inner-row --> 
 <p> Check it out, I'm not floated but I'm still going to fall below 
 the floated divs.</p> 
 </div> <!-- content-left --> 
 <div id="sidebar"> 
 <div class="sidebar-div">  
 blah blah blah blah blah blah blah  
 blah blah blah blah blah blah blah  
 blah blah blah blah blah blah blah  
 </div>  
 <div class="sidebar-div">  
 blah blah blah blah blah blah blah  
 blah blah blah blah blah blah blah  
 blah blah blah blah blah blah blah  
 </div>  
 <div class="sidebar-div">  
 blah blah blah blah blah blah blah  
 blah blah blah blah blah blah blah  
 blah blah blah blah blah blah blah  
 </div>  
 <div class="sidebar-div">  
 blah blah blah blah blah blah blah  
 blah blah blah blah blah blah blah  
 blah blah blah blah blah blah blah  
 </div>  
 </div> <!-- sidebar -->  
</div> <!-- container -->  
</body> 
</html>

(As aside, floats really aren't needed for this scenario, just a working example of shrink wrapping.)

When you say, "... watch out for the use of any clearing elements, these can cause floated items to pop below content unexpectedly" do you mean _don't_ use any clearing elements?

No, there are times you will need a .clear-div, it depends on the layout. In the above, no clearing elements were used anywhere. But there are times when a clearing element will clear something you don't want.

milosevic

4:44 pm on Nov 2, 2010 (gmt 0)

Clearing is using the CSS clear: property to make elements render below floated ones.

Clearfixing is using a technique to make a floated box of unknown height take up the same space on the page as elements inside it.

pab1953

7:49 pm on Nov 2, 2010 (gmt 0)

Thanks rocknbil for suggestion, generous example. Problem solved.

And thanks for "clearing" distinctions, milosevic.