CSS Forum

**RanaD** · 02-04-2007, 03:44 AM

A certain lady will be glad to hear that I'm converting from tables to CSS layout. I need some help though: I have 3 columns, the outer ones should be 150px wide each, but the middle column I want to expand according to screen resolution.

The problem comes from the fact that I'm loading the content (middle) column first in the HTML, and using

Code:

margin-left: -650px;

to put the left column in place.

HTML:

Code:

<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="content">
<h2>Header</h2>
<p>text</p>
</div>
<div id="leftnav">
<ul>
<li>Menu Options</li>
</ul>
</div>
<div id="rightnav">
<p>Other Stuff</p>
</div>
<div id="footer">
Footer
</div>
</div>

CSS (I haven't validated yet)

Code:

body
{
text-align: center;
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
}
div#container
{
margin-left: auto;
margin-right: auto;
margin-top:0;
margin-bottom:0;
width: 99.8%;
text-align: left;
}
#container
{
float:left;
width: 99.8%;
border: 1px solid #FF6600;
}
#top
{
padding: .5em;
background-color: #FF6600;
border-bottom: 1px solid #FF6600;
}
#top h1
{
padding: 0;
margin: 0;
}
#content
{
float: left;
margin-left: 150px;
width:445px;
border-left: 1px solid #FF6600;
border-right: 1px solid #FF6600;
padding: 1em;
text-align: justify;
color: #999999;
font-size: 16px;
}
* html #content
    {
    display: inline;
    }
a:link {
color:#999999;
text-decoration:underline;
}
a:visited {
color:#999999;
text-decoration:underline;
}
a:hover {
color:#999999;
text-decoration:underline;
}
#leftnav
{
float: left;
margin-left: -650px;
padding: 1em;
list-style-image:url(../images/bl_paw.gif);
}
a.menu:link {
color:#FF6600;
font-size:18px;
font-weight:bold;
text-decoration:none;
background-color: #369;
}
a.menu:visited {
color:#FF6600;
font-size:18px;
font-weight:bold;
text-decoration:none;
}
a.menu:hover {
color:#FF6600;
font-size:18px;
font-weight:bold;
text-decoration:none;
}
#rightnav
{
float: right;
width: 150px;
padding: 1px;
margin-top: 1em;
text-align: center;
}
#footer
{
clear: both;
padding: .5em;
color: #333;
background-color: #FF6600;
border-top: 1px solid #FF6600;
text-align:center;
}
* html #footer
    {
    position: relative;
    }
#leftnav p, li, #rightnav p, li { margin: 0 0 .5em 0; }
#content h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em 0; font-size:16px; }
.white {
    color: #FFFFFF;
}
img {
border:0;
}

**LadynRed** · 02-04-2007, 11:25 AM

You might want to check out these 3 col layouts:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

**RanaD** · 02-04-2007, 01:04 PM

Darn, and I though nothing was impossible

Thanks!

**RanaD** · 02-05-2007, 06:51 AM

Ah ha! I found one that works perfectly. And yes, nothing is impossible, as long as you read past the first article that says that it's impossible

[page 100%{wrap 80%(float left lefnav 25%;float right content 75%)} float right rightnav 20%]

I presume (because I can't test on a higher screen resolution...stupid screen I have) leftnav 25% is 25% of the wrap 80% (which becomes 100% for the content of the wrap), not the page 100%.

I've reduced my % slightly to accomodate the margins & padding. It looks fine on my screen (800X600), should look fine on higher resolutions, and I'm not concerned about lower resolutions.

Learning CSS layouts could be fun once I get past the basics... Nice challenge.