Member Avatar for vampz

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
  • 188 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by vampz
Member Avatar for vasanth19

Close the image tag properly and modify the css below.

#menu{
    float:right;
}
Member Avatar for gentlemedia

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.

Member Avatar for vampz

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.