whats wrong with this code i can't get menu and logo alinged i want logo to the left and menu to right along with logo, but i'm getting logo on the top and menu below it...can anyone explain the problem to me? and also what should be the solution for this?

<!DOCTYPE html>
<html>
<head>
<title> My website </title>

<style>
#logo{
height:30px;
padding:0;
margin:0;
float:left;

}
#menu{

}
ul{
float:left;
list-style-type:none;
width:100%;
padding:0;
margin:0;

}
 li{
display:inline;

}

</style>
</head>
<body>
<div id="container">
<div id="logo"><img src="images/logo.jpg"</div>
<div id="menu">
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>Help</li>
<li>About us</li>
<li>Who we are</li>
</ul>
</div>




</div>
<body>




 </html>

Close the image tag properly and modify the css below.

#menu{
    float:right;
}

They can't sit net next to each other, because there is simply no room for it. In your CSS, you have set the ul to a width of 100%, which means it will fill the width of the browser window fully. So it drops to tne next line. If you give the logo div for example a width of 20% and the ul a width of 80%, then they will align next to each other.

thanks guys

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.