I'm having a lot of trouble making the content div and the rightnav div stay inside the container div. No matter if I float the rightnav right, or the content left, they both go outside the container. here's the code, and CSS, let me know if you need more info.
CSS
body {
font: .95em 'Lucida Grande', verdana, arial, sans-serif;
background: #e0e0e0;
color: #c0c0c0;
}
div#container {
width: 85%;
margin: auto;
background-color: #FFF;
border: 1px solid #000;
}
#header {
height: 120px;
width: 100%;
margin-bottom: 0px;
padding: 0;
}
div#menu{
float:left;
width: 98.2%;
padding: 2px 0 0 15px;
font-size: .8em;
margin: 10.8% 0 0 0;
}
ul#nav,ul#nav li{
list-style-type:none;
margin:0;
padding:0;
}
ul#nav li{
float:left;
width:9em;
margin-right:2px;
text-align: center;
}
ul#nav a{
display:block;
text-decoration:none;
padding:2px 0 5px;
background: #88A9B2;
color: #FFF;
}
ul#nav li.activelink a,ul#nav a:hover{
text-decoration: underline;
}
div#content{
float: left;
width: 60%;
}
div#rightnav {
margin-bottom: 0;
padding: 3px;
}
* {margin: 0; padding: 0;}
HTML CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"smallvilleMP.css" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"niftyCorners.css" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"niftyPrint.css" media="print" />
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"seasons.htm">Episode Guide</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"character_guide.htm">Character Guide</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"music.htm">Music</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Forum</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>Paragraph</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="rightnav">
<ul>
<li>Thing 1</li>
<li>Thing 2</li>
<li>Thing 3</li>
<li>Thing 4</li>
<li>Thing 5</li>
</ul>
</div>
<div id="footer">
</div>
</div>
</body>
</html>First, you have an invalid doctype. You declare html4 then use an xml prologue. Change this to just <html>
Second, you just need to clear the floats. Do a search for that.
Third, because you need to change the doctype, you can't use the xhtml end />. Just delete the /
Fourth, VALIDATE your code.
Add this for #container to fix your float problem:
{
position:relative;
overflow:auto;
}Hey, thank you for the help. Your position and overflow help worked. However after I put the rest of my code back in (I took a lot out to make it simpler to find the problem) it does something strange towards the bottom of the page, if you scroll down it will get to a point where it will only scroll the same thing over and over, and there's a huge empty space towards the bottom also. I can put the page up for a bit but I don't want to do it for long as it's a site i'm working on and it's not really for publishing yet. Also in this (<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/tutorial0815.htm">http://css.maxdesign.com.au/floatutoria ... al0815.htm</a><!-- m -->) tutorial they get the specified look without using those, but when I try to replicate it it doesn't work for me... Seems weird as my menu at the top is floated and it does not go outside the #container. Thanks again.Here is the site <http://www.michaelpeteuil.com/character_guide.htm> (without the < and > obvously, I just didn't want to make it an active link), please help me out. I have the overflow commented out in the CSS, but if you have firefox and the editcss or web developer extentions then you can uncomment it, and see what it does for yourself. I want to be able to put a navigational menu on the right side. I need to rethink how I will organize the characters also becuase there is way to many on one page, users don't want to scroll for days searching for one, but that's for a different thread.The tutorial used a different method to "clear floats". They used clear:both. Now, I just woke up this morning and have things to do but I'll come back and look into it when I can. In the meantime, you might try overflow:hidden.
BTW, I met whatzhizname from the "Lois and Clark" TV show with Terri Hatcher and whatzhizname.I think the repeat is caused by no height on the div. At least putting a height on it stops the problem.Alright, well the hidden overflow fixed the strange problem, I also figured out how to get the 2 columns, I just floated both of the divs in the container to the left and didn't clear so they lined up next to each other. I got that from this CSS book i'm in the process of reading (probably should read the whole thing before creating the site, but I want to get it done by the start of the new season of the show) called Stylin' with CSS: A Designer's Guide. I'm wondering what is better horizontal navigation at the top, or vertical navigation on the side? The page I put the URL of earlier has been updated <http://michaelpeteuil.com/character_guide.htm> so check it out and let me know what you think please. Thank you.That's an excellent book. I need to add it to my sig.
I generally do global nav at the top and secondary on the side. If your footer div is meant to go below the two columns then you'll probably want to do a clear:both on it.drhowarddrfine: by whatzhizname do you mean Dean Cain? That is very cool, I've been a Superman fan for a while.
Everyone: Well I like the top menu but i'm not sure what to put in the side column. I either need to make a dropdown out of the top menu or make some kind of hybrid mmenu on the side becuase I want to make it easy to get to the various seasons (there is 4) for each guide (character, episode, music). So I don't wan users to have to go through a bunch of different links before they get to the season/episode that they are looking for information on. Other things will be coming to the site as well. It still has much work to be done on it.div#container {
clear: both;
}
CSS
body {
font: .95em 'Lucida Grande', verdana, arial, sans-serif;
background: #e0e0e0;
color: #c0c0c0;
}
div#container {
width: 85%;
margin: auto;
background-color: #FFF;
border: 1px solid #000;
}
#header {
height: 120px;
width: 100%;
margin-bottom: 0px;
padding: 0;
}
div#menu{
float:left;
width: 98.2%;
padding: 2px 0 0 15px;
font-size: .8em;
margin: 10.8% 0 0 0;
}
ul#nav,ul#nav li{
list-style-type:none;
margin:0;
padding:0;
}
ul#nav li{
float:left;
width:9em;
margin-right:2px;
text-align: center;
}
ul#nav a{
display:block;
text-decoration:none;
padding:2px 0 5px;
background: #88A9B2;
color: #FFF;
}
ul#nav li.activelink a,ul#nav a:hover{
text-decoration: underline;
}
div#content{
float: left;
width: 60%;
}
div#rightnav {
margin-bottom: 0;
padding: 3px;
}
* {margin: 0; padding: 0;}
HTML CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"smallvilleMP.css" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"niftyCorners.css" />
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"niftyPrint.css" media="print" />
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"seasons.htm">Episode Guide</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"character_guide.htm">Character Guide</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"music.htm">Music</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Forum</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>Paragraph</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="rightnav">
<ul>
<li>Thing 1</li>
<li>Thing 2</li>
<li>Thing 3</li>
<li>Thing 4</li>
<li>Thing 5</li>
</ul>
</div>
<div id="footer">
</div>
</div>
</body>
</html>First, you have an invalid doctype. You declare html4 then use an xml prologue. Change this to just <html>
Second, you just need to clear the floats. Do a search for that.
Third, because you need to change the doctype, you can't use the xhtml end />. Just delete the /
Fourth, VALIDATE your code.
Add this for #container to fix your float problem:
{
position:relative;
overflow:auto;
}Hey, thank you for the help. Your position and overflow help worked. However after I put the rest of my code back in (I took a lot out to make it simpler to find the problem) it does something strange towards the bottom of the page, if you scroll down it will get to a point where it will only scroll the same thing over and over, and there's a huge empty space towards the bottom also. I can put the page up for a bit but I don't want to do it for long as it's a site i'm working on and it's not really for publishing yet. Also in this (<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/tutorial0815.htm">http://css.maxdesign.com.au/floatutoria ... al0815.htm</a><!-- m -->) tutorial they get the specified look without using those, but when I try to replicate it it doesn't work for me... Seems weird as my menu at the top is floated and it does not go outside the #container. Thanks again.Here is the site <http://www.michaelpeteuil.com/character_guide.htm> (without the < and > obvously, I just didn't want to make it an active link), please help me out. I have the overflow commented out in the CSS, but if you have firefox and the editcss or web developer extentions then you can uncomment it, and see what it does for yourself. I want to be able to put a navigational menu on the right side. I need to rethink how I will organize the characters also becuase there is way to many on one page, users don't want to scroll for days searching for one, but that's for a different thread.The tutorial used a different method to "clear floats". They used clear:both. Now, I just woke up this morning and have things to do but I'll come back and look into it when I can. In the meantime, you might try overflow:hidden.
BTW, I met whatzhizname from the "Lois and Clark" TV show with Terri Hatcher and whatzhizname.I think the repeat is caused by no height on the div. At least putting a height on it stops the problem.Alright, well the hidden overflow fixed the strange problem, I also figured out how to get the 2 columns, I just floated both of the divs in the container to the left and didn't clear so they lined up next to each other. I got that from this CSS book i'm in the process of reading (probably should read the whole thing before creating the site, but I want to get it done by the start of the new season of the show) called Stylin' with CSS: A Designer's Guide. I'm wondering what is better horizontal navigation at the top, or vertical navigation on the side? The page I put the URL of earlier has been updated <http://michaelpeteuil.com/character_guide.htm> so check it out and let me know what you think please. Thank you.That's an excellent book. I need to add it to my sig.
I generally do global nav at the top and secondary on the side. If your footer div is meant to go below the two columns then you'll probably want to do a clear:both on it.drhowarddrfine: by whatzhizname do you mean Dean Cain? That is very cool, I've been a Superman fan for a while.
Everyone: Well I like the top menu but i'm not sure what to put in the side column. I either need to make a dropdown out of the top menu or make some kind of hybrid mmenu on the side becuase I want to make it easy to get to the various seasons (there is 4) for each guide (character, episode, music). So I don't wan users to have to go through a bunch of different links before they get to the season/episode that they are looking for information on. Other things will be coming to the site as well. It still has much work to be done on it.div#container {
clear: both;
}