CODEWITHSUNDEEP
csscss-float
Daemonic
Daemonic

Reputation: 65

weird float clear issue

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/

Upvotes: 5

Views: 549

Answers (5)

Avinash Malhotra
Avinash Malhotra

Reputation: 556

Float none stops an element to stop wrapping around adjacent floating element. 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,
https://tutorial.techaltum.com/css_float.html.

Upvotes: 0

Airen
Airen

Reputation: 2169

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.

Upvotes: 0

j08691
j08691

Reputation: 207891

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.

Upvotes: 3

Explosion Pills
Explosion Pills

Reputation: 191729

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/

Upvotes: 2

blend
blend

Reputation: 650

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/

Upvotes: 1

Related Questions