3 replies [Last post]
Action Jackson
Action Jackson's picture
Offline
newbie
Last seen: 2 years 40 weeks ago
Timezone: GMT-7
Joined: 2011-12-15
Posts: 2
Points: 3

I am having problems clearing a floated object in the center column of a 3 col layout. The 3 col layout has floating left/right columns. In the center I am floating a div to the left. When I attempt to clear the object in the center it attempts to clear the left column instead. I give up. Please help Smile

Sample code is posted below:

<html>
<head>
<style>
   div { padding: 10px; }
   #main { width: 500px; background-color: green; }
   #leftcol { float: left; width: 100px; height: 175px; background-color: Yellow; }
   #rightcol { float: right; width: 100px; height: 300px; background-color: Orange; }
   #centercol { margin-left: 120px; margin-right: 120px; background-color: White; }
   #centerGrayBox { float: left; width: 75px; height: 100px;  background: grey; display: block; }
   #centerBlueBox { clear: left; background-color: Blue; }
   #bottomBox { clear: both; background-color: Purple; }
</style>
</head>
<body>
<h2>Basic 3 col layout</h2>
<div id="main">
   <div id="leftCol">
      float: left;<br />
      width: 100px<br />
   </div>
   <div id="rightCol">
      float: right;<br />
      width: 100px<br />
   </div>
   <div id="centerCol">
      #centerCol<br />
      <div id="centerGrayBox">
        float: left;<br />
        width: 75px;
      </div>
      i want to clear the grey box so the next div is right under it.
   <div id="centerBlueBox">
      clear:left puts this box too far down...I want this div to be right under the grey one!
   </div>
</div>
<div id="bottomBox">#bottomBox (clear: both)</div>
</div>
</body>
</html>

Thanks!

Action Jackson
Action Jackson's picture
Offline
newbie
Last seen: 2 years 40 weeks ago
Timezone: GMT-7
Joined: 2011-12-15
Posts: 2
Points: 3

Here is a screen shot of my

Here is a screen shot of my issue.

Capture.PNG

Senff
Senff's picture
Offline
Regular
Montreal, Canada
Last seen: 2 years 20 weeks ago
Montreal, Canada
Timezone: GMT-4
Joined: 2011-12-13
Posts: 16
Points: 19

Since centerCol is not

Since centerCol is not floated itself, its contents (the grey and blue box) will act individually, though they will stay within the white centerCol.

Without clear:both, the blue box would just position itself between yellow and orange (they are floated left and right, resp., after all). But since you DO use clear:both, it will clear the orange float (on top of the grey one!) and position itself after that.

The solution would probably be to either give the white centerCol a specific width and a float left (and not the left- and right margins), OR you could put a new DIV within the white box, that has a float left so that it becomes a self-contained environment.

In the end, I would just suggest to give centerCol a float left and a width of some 200 pixels (in this example at least).

mS

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 2 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9190
Points: 3195

otoh

I would create new block formatting contexts as needed, e.g.

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <title>Test document</title>
 
    <style type="text/css">
    div { 
      padding: 5px; 
      }
 
    #main { 
      width: 500px; 
      background-color: green; 
      }
 
    #leftcol { 
      float: left; 
      width: 100px; 
      height: 375px; 
      background-color: yellow; 
      }
 
    #rightcol { 
      float: right; 
      width: 100px; 
      height: 300px; 
      background-color: orange; 
      }
 
    #centercol { 
      background-color: white; 
      overflow: hidden;
      }
 
    #centergraybox { 
      float: left; 
      margin-right: 5px;
      width: 75px; 
      background: grey; 
      }
 
    .item {
      background-color: lightblue; 
      margin: 5px 0;
      overflow: hidden;
      }
 
    #bottombox { 
      background-color: purple; 
      clear: both;
      }
 
    </style>
  </head>
  <body>
    <div id="main">
      <h1>Basic 3 col layout</h1>
 
      <div id="leftcol">
	<p>float: left;<br />
	width: 100px</p>
      </div>
 
      <div id="rightcol">
	<p>float: right;<br />
	width: 100px</p>
      </div>
 
      <div id="centercol">
	<h2>#centercol</h2>
 
	<div class="item">
	  <div id="centergraybox">
            <p>float: left;<br />
              width: 75px;</p>
	  </div>
 
	  <p>i want to clear the grey box so the next div is right under it.</p>
	</div>
 
	<div class="item">
	  <p>clear:left puts this box too far down...I want this div
	    to be right under the grey one!</p>
	</div>
      </div>
 
      <div id="bottombox">
	<p>#bottomBox (clear: both)</p>
      </div>
    </div>
  </body>
</html>
The clear property has big-toothed gotchas, one of which you've met. Floats also have gotchas, so you're asking for more potential complexity issues if you use them simply for their block formatting.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.