Css Layout?

[casho]

Hi, I'm having trouble with css and using it to make a layout. Right now it looks like this http://www.filecram.com/files/CSSLayout2.png
But I want it to look like this http://www.filecram.com/files/CSSLayout1.png
http://bf2ccre8or_94.gratishp.com/SiteHome.html

CSS

Code: Select all

#container
{
width: 70%;
margin: 5px auto;
background-color: #3e4637;
color: #;
border: 0px solid gray;
line-height: 150%;
}

#top
{
padding: 1em;
background-color: #6e7f62;
border-bottom: 0px solid gray;
color: #46523C;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: Left;
width: 100px;
margin: 0;
margin-left: 110px;
padding: 0em;

}

#content
{
margin-left: 200px;
border-right:0px solid gray;
padding: 1em;
max-width: 36em;
background-color: #788b6c;
color: #C0D9AF;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #6e7f62;
border-top: 0px solid gray;
font-size: 0.7em;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

[Aso]

Hi Casho

Those two links to your PNG's don't work. Can you post an alternative?

[masonbarge]

I'm not going to do the whole thing for you, but it looks like you want

Code: Select all

#content
{
width=70%;
float: right;
background-color: #788b6c;
color: #C0D9AF;
}

#leftnav
{
float: right;
width: 28%;
margin: 0;
padding: 0;
}

Then put #top (width:100%) inside #content and set a top
margin on #leftnav approximately equal to the height
of #content.

[welshstew]

did this fix your issue?