CSS Float, Clear a "Row" of Floating Elements

CSS float, clear a row of floating elements

Change "float: left;" to "display: inline-block; vertical-align: top;"

and it will work the way you want.

Example: http://jsfiddle.net/yK9eY/2/

div.item {

    display: inline-block;

    *display: inline;

    width:220px;

    background-color:#DBDBDB;

    margin:8px;

    vertical-align: top;

    zoom: 1; 

}

h1, p {

    padding: 4px;

    margin: 0;

}

<div class='item'>

  <h1>1</h1>

  <p>Content</p>

  <p>Content</p>

  <p>Content</p>

</div>

<div class='item'>

  <h1>2</h1>

  <p>Content</p>

  <p>Content</p>

  <p>Content</p>

</div>

<div class='item'>

  <h1>3</h1>

  <p>Content</p>

  <p>Content</p>

  <p>Content</p>

</div>

<div class='item'>

  <h1>4</h1>

  <p>Content</p>

  <p>Content</p>

  <p>Content</p>

</div>

<div class='item'>

  <h1>5</h1>

  <p>Content</p>

  <p>Content</p>

  <p>Content</p>

  <p>More Content</p>

  <p>More Content</p>

</div>

<div class='item'>

  <h1>6</h1>

  <p>Content</p>

  <p>Content</p>

  <p>Content</p>

</div>

<div class='item'>

  <h1>7</h1>

  <p>Content</p>

  <p>Content</p>

  <p>Content</p>

</div>

<div class='item'>

  <h1>8</h1>

  <p>Content</p>

  <p>Content</p>

  <p>Content</p>

</div>

<div class='item'>

  <h1>9</h1>

  <p>Content</p>

  <p>Content</p>

  <p>Content</p>

</div>

How does floating and clearing on the same element work?

You misunderstand clearing. clear: right simply means that the element should vertically clear all previously right-floated elements in the same context, in other words that it should drop below all other right-floated elements. Visualization:

|                          |
|            +-----++-----+|
|            |  A  ||  B  ||
|            |     ||     ||
|            +-----++-----+|
|                   +-----+|
|                   |  C  ||
|                   |     ||
|                   +-----+|
|                          |

All elements are floated right, but C is set to clear: right, so it drops below the previous floated elements.

CSS: Float over a clear

Try this:

<div style="float:right;height:0;">Mine</div>
<div style="clear:both;">Theirs now</div>
<div style="height:50px" id="blankspaceforstackoverflow"></div>
<div style="float:right">Mine</div>
<div>Where I want this item, without changing its css.</div>

In your div, add:

height:0;

div's will naturally resize in accordance with their content.

An exception to this rule is when the div contains floating elements. If this is the case you'll need to do a bit extra to ensure that the containing div clears the floats. You could use the clearfix method to do so.

More info

JSFiddle Demo

CSS floating element break to next line

Clear the float like below and there you go. Note the div:

  <div style="clear:both;"></div>

that I have added to the html.

Let me know your feedback. Thanks!

.clearfix:after {

  content: '';

  display: block;

  clear: both;

}

.outer {

  background: #ccc;

}

.outer div {

  border-right: 1px solid red;

  float: left;

  padding: 10px;

  width: 100px;

}

.outer .clear{

  clear:both; width: 0px; height: 0; padding: 0; margin: 0;

}

<div class="outer clearfix">

  <div class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

  <div class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

  <div class="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

  <div class="clear" style="clear:both;"></div>

  <div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

  <div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

</div>

What does the CSS rule clear: both do?

I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use clear: both; OR what does clear: both; exactly do...

I'll keep this answer simple, and to the point, and will explain to you graphically why clear: both; is required or what it does...

Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.

Why do they float elements?

Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below...

Live Example of the demo image.

Code For Demo

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */

    box-sizing: border-box;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

}

header, footer {

    border: 5px solid #000;

    height: 100px;

}

aside {

    float: left;

    width: 30%;

    border: 5px solid #000;

    height: 300px;

}

section {

    float: left;

    width: 70%;

    border: 5px solid #000;

    height: 300px;

}

.clear {

    clear: both;

}

<!-- HTML -->

<header>

    Header

</header>

<aside>

    Aside (Floated Left)

</aside>

<section>

    Content (Floated Left, Can Be Floated To Right As Well)

</section>

<!-- Clearing Floating Elements-->

<div class="clear"></div>

<footer>

    Footer

</footer>

Using :after to clear floating elements

Write like this:

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

Check this http://jsfiddle.net/EyNnk/1/

HTML/CSS: Clear floating elements in the middle without adding unneeded tags

Just use clear: both; on the 3^rd element, this way you don't have to use <div style="clear: both;"></div> after the floated elements.

.child:nth-child(3) {
    background: blue;
    color: white;
    clear: both;
}

Demo

---

Also, if whenever you are looking to clear a parent element without adding an extra element or using overflow: hidden; which is a dirty way to clear floats, you can call a class on the parent element, with the properties below

.clear:after {
   content: "";
   display: table;
   clear: both;
}

For example

<div class="wrapper clear">
    <div class="left_floated_div"></div>
    <div class="right_floated_div"></div>
</div>

---

Related Topics