...

View Full Version : Stupid CSS question



Scootertaj
06-02-2005, 12:15 AM
Hey guys, this is a really stupid question that I can't seem to figure out :p
I have a <div> for my header, <div> for my navigation, and a <div> for my main content. My header and navigation is fine, but when I try to fit my main content next to my navigation, it messes up and goes below, to the right of the navigation, when it should be pushed up.\

Note: I know I don't have a doctype and the HTML isn't valid, this is just a basic layout I did on my computer, not on the web.

Here is my HTML:


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Header</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="header">
Header
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="spanish1.htm" id="current">Home</a></li>
<li><a href="#">Spanish 1</a></li>
<li><a href="#">Spanish 2</a></li>
<li><a href="#">Health</a></li>

</ul>
</div>
<div id="main">
Main body
</div>

</body>

</html>


And the CSS:


#main
{
width: 80%;
height: 85%;
float: right;
padding-top: left;
}
#header
{
text-align: center;
border-style: groove;
width: 100%;
height: 15%
}
#navcontainer
{
width: 20%;
height: 85%;
border-style: groove;
background-color: #036;
}

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 180px;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #fff;
}


And I attached a picture to show what it's doing.

Edit: Says the image is invalid..

harbingerOTV
06-02-2005, 03:05 AM
your #main is floted. Move it above the #nav in the HTML.

Scootertaj
06-02-2005, 05:08 PM
Ahh that works! All I had to do is put the #main above the nav and float the nav, stupid me!

Thanks a lot Harbringer!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum