asis Stha asis Stha - 3 months ago 7
CSS Question

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.

Answer

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

  <div class="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>

Comments