Simple html/css layout? (two column)

Question

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?

Oh you'd be surprised how many people have trouble with simple column layouts using CSS. Alas table layouts are looked down upon nowadays. — tskuzzy
– tskuzzy, Commented Jun 5, 2012 at 20:43

Jeroen · Accepted Answer · 2012-06-05 20:52:06Z

1

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.

answered Jun 5, 2012 at 20:52

Jeroen

64.4k47 gold badges231 silver badges372 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mac · Accepted Answer · 2012-06-06 22:38:56Z

1

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...

edited Jun 6, 2012 at 22:38

answered Jun 6, 2012 at 16:44

Mac

1,2012 gold badges15 silver badges28 bronze badges

Comments

Paulo R. · Accepted Answer · 2012-06-06 18:19:13Z

0

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

answered Jun 6, 2012 at 18:19

Paulo R.

15.7k4 gold badges33 silver badges42 bronze badges

Collectives™ on Stack Overflow

Simple html/css layout? (two column)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related