CODEWITHSUNDEEP
htmlcss
Roman
Roman

Reputation: 66166

How to create a layout with 2 menu bars in css?

I have next markup: 

<div id="lefttop"></div>
<div id="leftbottom"></div>
<div id="central"></div>

I need markup as shown on the picture below: alt text http://img36.imageshack.us/img36/9894/makeupi.png

Upvotes: 2

Views: 185

Answers (3)

wheresrhys
wheresrhys

Reputation: 23500

#lefttop, #leftbottom {float:left;width:200px;}
#leftbottom {clear:left;}
#central {margin-left:200px;float:right;width: the-width-you-need px}

Come to think of it, width:auto might be the best choice for #central

*edit sorry for all the typos earlier

Upvotes: 2

James Linden
James Linden

Reputation: 59

This may actually work slightly better for you, as all three divs will scale/shift to match the browser window.

#lefttop {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 50%;
    width: 200px;
    margin-bottom: 5px;
}

#leftbottom {
    position: absolute;
    top: 50%;
    left: 10px;
    bottom: 10px;
    width: 200px;
    margin-top: 5px;
}

#central {
    position: absolute;
    top: 10px;
    left: 220px;
    bottom: 10px;
    right: 10px;
    overflow: auto;
}

Upvotes: 0

Marcel Korpel
Marcel Korpel

Reputation: 21763

Can you put #lefttop and #leftbottom together in one div? Like

<div id="left-container">
    <div id="lefttop"></div>
    <div id="leftbottom"></div>
</div>

That way it's easier to get them both on the left.

Upvotes: 2

Related Questions