I am new to web designing and I have been having trouble a making side menu. I use html and a internal css style sheet, for some reason the side menu always overlaps or get cluttered with all the rest of the content and it also goes to the botom of the content instead of on the side. I do tell the content to float left and the side menu to float right but that still wont work. what am I doing wrong?
this is my css code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
background-color:#06F;
margin:0px;
padding:0px;
}
#header_wrap{
width:100%
}
#header{
background-color:#FFF;
}
#banner{
background-color:#03C;
}
navigation_wrap{
}
#navigation{
background-color:#FFF;
margin:0px;
padding-bottom:10px;
}
#navigation ul{
}
#navigation li{
display:inline;
margin:0px;
padding:0px;
}
#navigation a{
padding:5px;
margin:3px;
display:block;
float:left;
background-color:
}
#content_wrap{
float:left;
width:75%;
background-color:#03C;
}
#content{
background-color:#FFF;
}
#sidebar{
float:right;
background-color:#FFF;
width:25%;
}
#sidebar li{
}
ul{
list-style-type:none;
}
#footer{
}
ul{
}
li{
}
h3{
}
h1{
}
p{
}
#clearer{
clear:both;
}
</style>
<title>TestPage</title>
</head>
<body>
<div id="header_wrap">
<div id="header">
<div id="banner">
<h1>Welcome To My Test Page</h1>
</div>
</div>
</div>
<div id="navigation_wrap">
<div id="navigation">
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</div>
</div>
<div id="content_wrap">
<div id="content">
<h3>Recent News</h3>
<p>this page is just a test</p>
<h3>Recent News</h3>
<p>this page is just a test</p>
<h3>Recent News</h3>
<p>this page is just a test</p>
</div>
</div>
<div id="sidebar">
<ul class="login">
<li>
<form method="get" action="" >
<input type="text" />
<br />
<input type="text" />
<input type="submit" value="submit">
</form>
</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
</ul>
</div>
<div id="clearer"></div>
<div id="footer">
<p></p>
</body>
</html>
this is just a sample, the code dosent have a start head tag because i acendetly deleted it while i was pasting it on the details, im pretty sure it has to do more with my stylesheet though. but ikm not sure what.
this is my css code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
background-color:#06F;
margin:0px;
padding:0px;
}
#header_wrap{
width:100%
}
#header{
background-color:#FFF;
}
#banner{
background-color:#03C;
}
navigation_wrap{
}
#navigation{
background-color:#FFF;
margin:0px;
padding-bottom:10px;
}
#navigation ul{
}
#navigation li{
display:inline;
margin:0px;
padding:0px;
}
#navigation a{
padding:5px;
margin:3px;
display:block;
float:left;
background-color:
}
#content_wrap{
float:left;
width:75%;
background-color:#03C;
}
#content{
background-color:#FFF;
}
#sidebar{
float:right;
background-color:#FFF;
width:25%;
}
#sidebar li{
}
ul{
list-style-type:none;
}
#footer{
}
ul{
}
li{
}
h3{
}
h1{
}
p{
}
#clearer{
clear:both;
}
</style>
<title>TestPage</title>
</head>
<body>
<div id="header_wrap">
<div id="header">
<div id="banner">
<h1>Welcome To My Test Page</h1>
</div>
</div>
</div>
<div id="navigation_wrap">
<div id="navigation">
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</div>
</div>
<div id="content_wrap">
<div id="content">
<h3>Recent News</h3>
<p>this page is just a test</p>
<h3>Recent News</h3>
<p>this page is just a test</p>
<h3>Recent News</h3>
<p>this page is just a test</p>
</div>
</div>
<div id="sidebar">
<ul class="login">
<li>
<form method="get" action="" >
<input type="text" />
<br />
<input type="text" />
<input type="submit" value="submit">
</form>
</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
<li>item</li>
</ul>
</div>
<div id="clearer"></div>
<div id="footer">
<p></p>
</body>
</html>
this is just a sample, the code dosent have a start head tag because i acendetly deleted it while i was pasting it on the details, im pretty sure it has to do more with my stylesheet though. but ikm not sure what.