weird float clear issue

Question

I have a pretty basic layout of a floated div for a left menu container column and a full width non floated div with left margin for the content area.

When i place floated div's into the content area they float and place as expected until i clear the float.

The next line of floats then appears not directly below the previous line, but all the way down below the bottom of the menu column

As you can see below there is nothing special about the layout, but the float issue is driving me nuts :)

<div style="float: left; width: 200px; height: 200px; border: 1px solid red;">
    floated left div
</div>
<div style="margin-left: 210px; border: 1px solid blue;">
    non floated right div containing floated divs inside<br />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
</div>

I have made a jsfiddle to demonstrate the issue; http://jsfiddle.net/jP6e9/

If the container does not introduce a new block formatting context, the `clear` does not allow the larger box to be floated left. http://jsfiddle.net/ExplosionPIlls/jP6e9/3/ — Explosion Pills, Jun 12 '13 at 16:08

score 3 · Answer 1 · edited May 23 '17 at 11:43

3

This is one of those quirky situations where you need to use overflow:auto to get what you want.

<div style="margin-left: 210px; border: 1px solid blue;overflow:auto;">

jsFiddle example

You need to trigger block formatting context by using the overflow property in conjunction with the float property.

See also: http://www.w3.org/TR/CSS21/visuren.html#block-formatting, http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/, and How does the CSS Block Formatting Context work? for some good info on block formatting context.

edited May 23 '17 at 11:43

Community

1
1

answered Jun 12 '13 at 16:12

j08691

204,283
31
260
272

thank you so much, i always thought the overflow: auto would add scrollbars, but i guess thats only the case if the height is set and the content is too long :) – Daemonic Jun 12 '13 at 16:22
sorry that i couldnt give the answer to both of you – Daemonic Jun 12 '13 at 16:31

score 2 · Accepted Answer · answered Jun 12 '13 at 16:13

2

The clear property pushes elements past a float in the given direction. Because of the clear: left, those elements are being pushed down past the large floated box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

You can easily create a new block formatting context by setting overflow: hidden on the wider box: http://jsfiddle.net/ExplosionPIlls/jP6e9/7/

answered Jun 12 '13 at 16:13

Explosion Pills

188,624
52
326
405

thank you so much, i always thought the overflow: auto would add scrollbars, but i guess thats only the case if the height is set and the content is too long :) – Daemonic Jun 12 '13 at 16:31

score 1 · Answer 3 · answered Jun 12 '13 at 16:07

1

It's because you created a float with the sidebar div, but didn't float the main div. Just include the main div in your float, remove that massive margin-left and replace it with something a bit more conservative:

<div style="margin-left: 20px; border: 1px solid blue; float: left">

Finally, clear that float:

<div style="clear: left"></div>

Updated:

http://jsfiddle.net/jP6e9/1/

answered Jun 12 '13 at 16:07

blend

640
4
6

sorry i should have said that the content div needs to be the full width of rest of the remaining screen space, else i would have normally laid it out as per your update – Daemonic Jun 12 '13 at 16:10

score 0 · Answer 4 · answered Jun 12 '13 at 16:34

you can use the display: table-cell for right div,like this:

<div class="left">floated left div</div>
<div class="right">
  non floated right div containing floated divs inside <br />
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <br style="clear: left;" />
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <br style="clear: left;" />
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <br style="clear: left;" />
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <br style="clear: left;" />
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <br style="clear: left;" />
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <div class="floatItem"> float</div>
  <br style="clear: left;" />
</div>

the css code:

.left {
  float: left; 
  width: 200px; 
  height: 200px; 
  border: 1px solid red;
  margin-right: 10px;
}
.right {
  border: 1px solid blue;
  display: table-cell;
}
.floatItem {
  float: left; 
  border: 1px solid green;
}

please view the deom.

score 0 · Answer 5 · answered Mar 27 '14 at 06:44

Float none stops an element to stop wraping around adjacent floating clild. By default all, elements have float none. Clear both stop element to wrap around any floating child from left or right. For more details and live examples, visit my tutorial,
http://tutorial.techaltum.com/css_float.html.

weird float clear issue

5 Answers5