...

View Full Version : 3 column CSS layout - Content overlapping leftnav?



WebLizzard
01-13-2010, 02:07 AM
Thanks in advance to anyone who can help me! I am a web designer trying to learn CSS. I am using a 3 column faux layout. (Image as background tiling down the page) Everything looked great until I changed some stylesheet data so my stylesheet would validate. For some reason, my entire middle content div shifted a little bit onto my left navbar div after uploading my validated stylesheet. I tried playing with margins and widths. I cannot figure out what I did or why this is happening. I'm so frustrated. :( Anyone have any ideas? I would really appreciate any input.

This is my website ---> (Ironic that I'm trying to explain how to construct websites correctly) http://www.makeawebsitework.com/test.html

This is my CSS Code --->


* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#whole {
margin: 0 auto;
width: 1020px;
}
#columns {
background: url(../image-files/makeawebsite.jpg);
margin-bottom: 0px;
overflow: auto;
width: 100%
}
#header {
color: #333;
width: 1000px;
padding: 10px;
height: 180px;
margin: 10px 0px 0px 0px;
background-image: url(../image-files/weblogo.jpg);
border-bottom: 2px solid #000000;
}
#header a {

color: #ffffff;
text-decoration: underline;
font-weight: bold;
font-family: Arial;
font-size: 14px;

}

div#navbar2 {

border-top: solid #000 1px;
border-bottom: solid #000 1px;
padding: 10px;
margin: 0px 0px 0px 0px;
background-color: #666633;
height: 10px;


}


div#navbar2 ul {

margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
line-height: 10px;
white-space: nowrap;


}


div#navbar2 li {

list-style-type: none;
display: inline;


}


div#navbar2 li a {


text-decoration: none;
padding: 7px 10px;
color: #000000;


}


div#navbar2 li a:link {
color: #000000;

}


div#navbar2 li a:visited {
color: #000000;


}


div#navbar2 li a:hover {
font-weight: bold;
color: #000000;
text-decoration: underline;

}
#leftnav {
display: inline;
color: #333;
margin: 0px;
padding: 0px;
width: 195px;
float: left;
background-color: #968e61;
text-decoration: underline;
}
#leftnav ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
}

#leftnav a
{
display: block;
width: 178px;
padding-top: 7px;
padding-right: 3px;
padding-bottom: 7px;
padding-left: 3px;
border-bottom-width: 1px;
}

#leftnav a:link, .navlist a:visited
{
color: #000000;
text-decoration: none;
font-weight: bold;
}

#leftnav a:visited
{
color: #000000;
text-decoration: underline;
font-weight: bold;
}

#leftnav a:hover
{
text-decoration: none;
color: #000000;
background-color: #666633;
}

#content {
float: left;
color: #333;
margin: 5px 10px;
padding: 0px;
width: 597px;
display: inline;
position: relative;
}
#rightcolumn {
display: inline;
background-color: #968e61;
margin: 0px 0px 10px 10px;
padding: 0px;
width: 195px;
float: right;

}
#footer {
width: 1000px;
clear: both;
color: #333;
background: #ABBEBE;
background-color: #CCCCCC;
margin: 0px 0px 10px 0px;
padding: 10px;
}
p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
line-height: 11pt;
margin-top: 3px;
margin-right: 0;
margin-bottom: 3px;
margin-left: 0;
padding-bottom: 9px;
}

p.class {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 15px;
font-weight: bold;
line-height: 18pt;

}
p.bot {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
line-height: 16pt;
}
p.bold {
font-weight: bold;
font-size: 14px;
}
p.bigtext {
font-size: 14px;
font-weight: bold;
color: #666633;
}

a {
color: #0000FF;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color: #0000FF;
text-decoration: underline;
font-weight : bold;
}
a:hover {
color: #666633;
text-decoration: inherit;
}


h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
color: #333333;
line-height: 24px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
color: #333333;
line-height: 20px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #333333;
line-height: 20px;
text-decoration: underline;
}
#divback {
width: 580px;
background-color: #CCCC99;

}
#divholder {
width: 190px;
text-align: center;

}
#divholder2 {
width: 1000px;
text-align: center;

}
#divcost {
width: 300px;
float: left;
}
#divcost2 {
width: 290px;
float: right;

}
#divbrown {
background-color: #CCCC99;
}

#top {
text-align: center;
}
#divcost3 {
width: 300px;
text-align:center;
float: left;
}


.images { text-align: center; }
.clear { clear: both; background: none; }

Excavator
01-13-2010, 03:25 AM
Hello WebLizzard,
Just to put a visual on it so you can see what's going on, try putting background colors on the columns.
Like this -

#leftnav {
display: inline;
color: #333;
margin: 0px;
padding: 0px;
width: 195px;
float: left;
background: #f00;
text-decoration: underline;
}
#content {
float: left;
color: #333;
margin: 5px 10px;
padding: 0px;
width: 597px;
display: inline;
position: relative;
background: #0f0;
}
#rightcolumn {
display: inline;
background: #00f;
margin: 0px 0px 10px 10px;
padding: 0px;
width: 195px;
float: right;
}


You will also need to understand how the box model (http://www.w3.org/TR/CSS2/box.html) works. margin/padding/border all add up when figuring the total width of an element.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum