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:
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?
3 answers
solution1
1 ACCPTED 2012-06-05 20:52:06
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.
solution2
1 2012-06-06 16:44:35
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...
solution3
0 2012-06-06 18:19:13
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:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.