Silly Div troubles

programming web dev
1

alright so I’m doing a straight xHTML/CSS site and i’m having issues with my “wrapper” div (the div that surrounds everything else)

The issue is that even thoughthere is content in divs inside the wrapper the wrapper for some odd reason stops just under the header … I tried changing the padding/margin hoping that it would smack against one of the internal divs and that would make it realize that it’s supposed to expand to fit arround the internal content … but naturally that isn’t the case

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="naked.css" rel="stylesheet" type="text/css" />
<title>xhtml/Css only page</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="navigation">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</div>
<div id="content">
<h3>Naked Style</h3>
<p>This is a bit of an xHTML/CSS experiment to see what I can do with little to no graphics. My aim is to completly construct and stylize the page with nothing but built in &quot;web styles&quot;. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed sem vitae odio dapibus congue. Curabitur dictum. Mauris magna. Aliquam tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at enim a tellus molestie gravida. Donec dolor erat, congue ac, malesuada condimentum, adipiscing in, nulla. Sed euismod nonummy risus. Fusce enim. Vestibulum augue elit, fermentum a, tempus nec, consectetuer at, nunc. Nam malesuada venenatis nibh. Maecenas laoreet massa vitae pede. Pellentesque consectetuer nulla vel libero. Mauris pharetra pretium turpis. 
 
</p>
</div>
<div id="rightside">
<p>Duis nunc. Nunc sed nulla ut lacus vestibulum convallis. Sed congue consequat purus. Nunc sagittis, turpis sit amet condimentum congue, elit orci mattis eros, at imperdiet elit libero vitae orci. Duis dapibus. Cras fringilla metus at dolor. Vestibulum tempus dui vel justo. Mauris sit amet nisi eu justo scelerisque cursus. Aliquam tempor semper enim. Morbi malesuada tristique enim. Aliquam erat volutpat. Phasellus vel turpis. Praesent nonummy iaculis metus. In hac habitasse platea dictumst. Aenean justo. Curabitur quis tortor. In hac habitasse platea dictumst. </p>
</div>
<div id="footer"> </div>
</div>
</body>
</html>



html {
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
}
 
#wrapper {
padding: 0px;
margin: 50px;
border: 1px solid green; 
}
 
#header {
margin: 10px 0px;
padding:0px; 
}
 
#navigation {
margin: 0px 0px 0px 10px;
padding:0px 0px 0px 5px;
 
}
 
#navigation ul{
margin: 0px;
padding:0px;
}
 
#navigation li{
list-style-type: none;
display:inline;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 0px;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid #3399FF;
border-left: 1px solid #3399FF;
}
 
#content {
width: 480px;
float: left;
margin: 10px;
padding: 5px; 
}
 
#rightside {
padding: 5px;
margin: 10px;
float: left;
width: 250px;
}
 
#footer{
 
}