0

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>
3
Contributors
3
Replies
24
Views
2 Years
Discussion Span
Last Post by vampz
1

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.