Question

If the content inside the left div increases the height of the overall layout will increase accordingly and everything will work as it should: jsfiddle. However if the content inside the right div increases in height, the layout doesn’t increase with it: jsfiddle

<div class="outer">
   <div class="contain">
        <div class="one">
       </div><div class="two">
                 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

        </div>
    </div>

    <div class="bottom">
    </div>
</div>

CSS:

.outer {
   display: block;
   width: 500px;
   min-height: 500px;
   background-color: black;    
   border: 2px solid black;
}

.contain {
   display: block;
   width: 500px;
   min-height: 500px;
   background: red;
}

.one {
    display:inline-block;
    width: 200px;
    min-height: 100px;
    background: yellow;
    bottom:200px;
}

.two {
    float:right;
    width: 300px;
    min-height: 300px;
    background: purple;

}

.bottom {
    display:block;
    background: blue;
    width: 500px;
    height:200px;  
    bottom: 0;    
}

​Would appreciate some guidance.

Answer 1

I’m assuming from your code that you want the two boxes (one and two) to be bottom aligned if they don’t fill the space? If so, you should try this:

.one {
    display:inline-block;
    width: 200px;
    min-height: 100px;
    background: yellow;
    vertical-align: bottom;
}

.two {
    display:inline-block;
    width: 300px;
    min-height: 300px;
    background: purple;
    vertical-align: bottom;
}

You are making both a set width, so set both as inline-block and they should sit side-by-side, and both take up space. Floated blocks do not take up space.