Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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>
share|improve this question

closed as off topic by Stephen Ostermiller, bybe, Su', John Conde Mar 10 '13 at 16:31

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1  
Questions about how to code something are usually better answered at stackoverflow.com. I've voted to migrate this question. –  Stephen Ostermiller Mar 10 '13 at 13:28
    
I thought of posting it there, where I'm more active, but I feared that someone would say "Questions about css like this are usually better answered at webmasters" :-) –  RoyHB Mar 10 '13 at 13:50

1 Answer 1

up vote 0 down vote accepted

This question is better on stack overflow and most likely a duplication somewhere...

None the less here is the answer your looking for:

<style type="text/css"?
#container {width:100%;height:600px;}
#column1, #column2 {float:left;height:100%;}
#column1 {width:30%;}
#column2 {width:70%;}
.column1-top {height:30%;}
.column1-bottom {height:70%;}
</style>

<div id="container">
    <div id="column1">
        <div class="column1-top"> </div>
        <div class="column1-bottom"> </div>
    </div>
    <div id="column2"> </div>
</div>

I have even made this into a working demo on Fiddle for you to view online and alter if required.

share|improve this answer
    
Thanks Bybe, works great –  RoyHB Mar 10 '13 at 21:16
    
If you believe this is the working solution that you wanted then please mark the question accepted, as this helps us keep the site cleaner. –  bybe Mar 11 '13 at 0:11

Not the answer you're looking for? Browse other questions tagged or ask your own question.