Home/ Questions/Q 6713801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T08:25:21+00:00

Situation: I have a container with two direct children, we will call them left

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0