CODEWITHSUNDEEP
htmlcss
IMEzzat
IMEzzat

Reputation: 21

CSS Floating div inside another div

i have a div that floats to left and another one that floats to right the main main div that including the floating div does not reach the bottom of the page and the code example is:

<div style=" width: 900px; height:auto; margin:5px auto; background:#666; ">
  <div style="float:left;">
  Some content! Some content! Some content! 
  </div>
  <div style="float:right;">
  Some content! Some content! Some content! 
  </div>
</div>

what is problem?

Upvotes: 1

Views: 4772

Answers (2)

jonesbp
jonesbp

Reputation: 363

The height of floated elements is not taken into account when the height of their parent element is calculated. You should look into the CSS property clear. In this case a third div with the CSS clear: both would help you achieve the result that you want.

However, you should step back and consider what it is you're trying to do. If you just have these two divs next to each other with no other box elements at this level, you maybe don't need to be floating both elements.

Upvotes: 6

Mat&#237;as Chomicki
Mat&#237;as Chomicki

Reputation: 107

A container div with floating elements ignores the height of its children if you don't apply a clearfix to the container.

Upvotes: 1

Related Questions