CODEWITHSUNDEEP
htmlcssasp.net-mvc-3layoutrazor
Kyle
Kyle

Reputation: 17687

Simple html/css layout? (two column)

I'm having a very hard time trying to come up with html/css for a layout to suite the following:

Layout

Where the left area is a static menu. The right area is dynamic content, generated using a call to ASP.Net's RenderBody method. You may not believe it, but I have been trying to figure this out for hours. I keep getting either the right section ending up underneath the left section taking 100% of the width or not displaying at all, with Chrome's object inspector saying its 0 pixels wide.

I feel like a complete idiot as this seems as if it should be easy as pie. Could I please get some help?

Upvotes: 0

Views: 3116

Answers (3)

Mac
Mac

Reputation: 1201

This solution has the added benefit that your content region will take up exactly 100% of the remaining width of its parent:

<div class="parent">
    <div class="content">blah...</div>
    <div class="left-menu">blah...</div>
</div>

CSS:

.parent { padding-left:200px;width:100%; }
.content { position:relative;float:left;width:100%; }
.left-menu { position:relative;float:left;width:200px;right:200px;margin-left:-100%; }

Excellent tutorial on fluid layouts: http://www.alistapart.com/articles/holygrail

Works in IE7 and newer, Safari/Chrome/Opera/Firefox...

Upvotes: 1

Paulo R.
Paulo R.

Reputation: 15619

The best way to do this is by using the already considered safe to use box-sizing property.

Take a look at the tinkerbin -> http://tinkerbin.com/AcJjYk0r

It works as you want it to. Fixed width for the menu, percentage based width for the content area.

Then...

...if you want the background-colors to expand to the highest of the heights between the two boxes (remember, one times the menu can be higher than the content box, and vice-versa), then the only way to go about it (no javascript) is to use a background image and place it below the two boxes. With css3 gradients (safe to use too) it's pretty easy. Take a look:

http://tinkerbin.com/3ETH28Oq

Upvotes: 0

Jeroen
Jeroen

Reputation: 63870

There's several ways to go about this. Here's one not particularly fancy but straight-up way to go about it:

<body>
    <div id="menu">MENU</div>
    <div id="content"> content <br /> content <br /> content </div>
</body>

CSS:

div { border: 2px solid black; } /* demo purposes */

#menu {
    float: left;
    width: 150px;
}

#content {
    margin-left: 154px; /* menu width + (2 x menu.border-width) */
}

See this jsfiddle for a working sample.

Upvotes: 1

Related Questions