View Full Version : Stupid CSS question

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:


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

<div id="header">
<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>

<div id="main">
Main body



And the CSS:

width: 80%;
height: 85%;
float: right;
padding-top: left;
text-align: center;
border-style: groove;
width: 100%;
height: 15%
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..

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

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!