: Aligning 3 divs I'm good at some things but html/css layout isn't one of them. I need to lay out a page with two divs on the left, div1 (height 30%, width 30%) on top and div2 (height

@Turnbaugh106

Posted in: #Css #Html

I'm good at some things but html/css layout isn't one of them.

I need to lay out a page with two divs on the left, div1 (height 30%, width 30%) on top and div2 (height 7% and width 30%) below div1. These 3 divs to be within a container div.

Then I need to add div3 to the right of div1 and div 2. Div 3 to be width 70%, height 100%.

***************************************
* div1 * div3 *
* * *
************ *
* div2 * *
* * *
* * *
* * *
***************************************


I've tried every combination of floating, clearing and black magic that I can think of
but I can't get div 3 to line up where I want it. I'd appreciate it if someone could fill in the skeleton below with the correct stuff to accomplish this layout.

<style type="text/css"?
#container {position: absolute;width:100%; height:100%}
#div1 {position:relative;width:30%;height:30%;}
#div2 {position:relative;width:30%;height:70%;}
#div3 {position:relative;width:70%;height:100%;}
</style>
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>

Vote Up Vote Down

Login to post a comment!