CODEWITHSUNDEEP
htmlcsscss-float
rlemon
rlemon

Reputation: 17666

make two floating divs the same height dynamically

Situation: I have a container with two direct children, we will call them left and right.
left should never be allowed to extend past the height of right, however right should be allowed to extend past the height of left.

enter image description here

I can't figure out how to do this with CSS (hopefully while maintaining the simplicity of my markup)

example html

<div class="wrapper">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>

example css

.wrapper {
    display: inline-block;
    margin: 10px 0;
}
.left {
    float: left;
    width: 60px;
    background-color: #999;   
}
.right {
    float: left;
    width: 540px;
    border: 4px solid #666;
    padding: 8px;
}

or see what I mean here

Upvotes: 0

Views: 901

Answers (2)

allaire
allaire

Reputation: 6045

Yes, you need to rely on JavaScript for this kind of problem, you could just always set the min-height of the left column according to the height of the right column, or something similar to that!

Using jQuery, this might help you getting started! http://www.cssnewbie.com/equal-height-columns-with-jquery/

Upvotes: 0

Dennis Hunink
Dennis Hunink

Reputation: 583

It's kind of an common problem. The thing is, you need either a CSS/background image trick or use javascript. One common used is Faux Columns.

Upvotes: 3

Related Questions