Search code examples
htmlcsslistcss-floatclearfix

CSS floating element break to next line

I've come to the condition like this:

HTML

<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="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>

CSS

.clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
    .outer {
        background: #ccc;
    }
    .outer div {
        border-right: 1px solid red;
        float: left;
        padding: 10px;
        width: 100px;
    }

enter image description here

Here, I want 4th and 5th div to be in new line. How do I do that. I tried br tag between 3rd and 4th div.. didn't work.

Solution

  • 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>