Question

<div class="cat-left">
</div>
<div class="cat-right">
</div>

.cat-left {
float: left;
width: 233px;
border: 1px solid #c5c5c5;
}
.cat-right {
margin-left: 12px;
float: left;
}

I write this for make two box (one in left and one in right). now I want to make another

<div class="cat-left"></div> 

if i put my cat-left after my cat-left then it’s shown in right of first cat-left. You have seen that I have used border. Is their any option for me to make it in bottom on existing cat-left.

check http://s7.postimage.org/3t6rfpdih/demo.png for figure out what exactly I want my code.

I have tried by giving position absolute to second cat-left but not sure how it’s help me without setting margin in pixel.

Answer 1

You need to include two sub-divs in your cat-left box like so:

<div class="cat-left">
    <div class="cat-left-inner">
        Left top
    </div>
    <div class="cat-left-inner">
        Left bottom
    </div>
</div>
<div class="cat-right">
    Right
</div>

​
where

.cat-left-inner {
    height: 10em;
}

You need to provide set heights to your divs to make them fill out their containers in the desired way. See this fiddle for a more concrete example: http://jsfiddle.net/A6axj/2/.