CODEWITHSUNDEEP
csshtml
Rahul Khosla
Rahul Khosla

Reputation: 449

CSS Floating divs but keeping min-height

I need to float 2 divs #left to left side #right to right side but when I do this my #hold for left and right doesn't extend (its set with min-height).

Is there any way I can float 2 divs side by side but keeping them extending the min-height?

I have tried: display:inline-block; but its a mess to sort with IE. I have also tried position:relative and position:absolute.

Thanks

Upvotes: 1

Views: 4361

Answers (3)

CRutgerX
CRutgerX

Reputation: 19

I had the same problem and understand your vague description, i think this is what you meant:

http://jsfiddle.net/QT6jS/8/

the solution is to add another div at the bottom of all floats, that clears all. The min-height won't folllow a float, but will follow a div with clear:both;

    <div class="parent_expander" style="clear:both;"></div>

this will get you the following result:

http://jsfiddle.net/QT6jS/9/

Upvotes: 1

Rahul Khosla
Rahul Khosla

Reputation: 449

Simple fix sorry for inconvenience, if anyone else is having the same problem just add overflow: hidden; to your #hold div.

Thanks to this post: How do I keep two divs that are side by side the same height?

Upvotes: 3

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

A basic example of the situation you describe works with no issue.

HTML

<div class="test">Something</div>
<div class="test">Something</div>

CSS

.test{
    float: left;
    min-height:100px;
    background: yellow;
}

Working Example http://jsfiddle.net/QT6jS/

Upvotes: 0

Related Questions