Auto width for floated div

Question

here is my code

<div class='content'>
  <div class='div1'>content</div>
  <div class='div2'>content</div>
</div>

.content { width:300px;}
.div1 { float:left;width:200px;}
.div2 { float:left;width:100px;}

in some case I need to set display:none for div2. is it possible to set .div1 width to full-size of .content ( 300px )

Answer 1

Reorder your divs, and use overflow: hidden:

<div class='content'>
  <div class='div2'>content 2</div>
  <div class='div1'>content 1</div>
</div>

.content { width:300px; overflow: hidden;}
.div1 { overflow: hidden;}
.div2 { float:left; width:100px;}