CODEWITHSUNDEEP
css
Tania Marinova
Tania Marinova

Reputation: 1898

make the wrapping div at least the same height as the bigger div

I've got one wrapping div and two divs with different height inside them. How can I make sure that the wrapping div is always at least the height of the bigger div inside it because for some reason I see that when in the .leftMenu div there is a lot of info (both divs are dynamically filled with info) - the wrapping div stays as the height of .centerBody! (I've put on purpose the styles of divs inline so its quicker)

My code:

<div id="importPartUpdate">               
 <div class="leftMenu" style="position: relative;margin-top: 10px;width: 15%;clear: both;display: inline-lock;float: left;" />        
 <div class="centerBody" style="margin-top: 10px;margin-left: 0px; display: inline-block; position: reative;width: 83%;padding: 5px;"/>                      
</div>

Upvotes: 0

Views: 42

Answers (2)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Clear your div floats using clear:both CSS property.

 <div id="importPartUpdate">               
  <div class="leftMenu" style="position: relative;margin-top: 10px;width: 15%;clear: both;display: inline-lock;float: left;" />        
  <div class="centerBody" style="margin-top: 10px;margin-left: 0px; display: inline-block; position: reative;width: 83%;padding: 5px;"/>
  <div style="clear:both"></div>                      
</div>

FIDDLE DEMO

Upvotes: 1

roemel
roemel

Reputation: 3297

You can use display:flex;. Check this link: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here's the working fiddle: http://jsfiddle.net/NhKb6/2/

Upvotes: 0

Related Questions