Basic CSS alignment question.

Question

Hi there,

I am writing the html code for navigation using the ul, li element,

my html is.

<div id="header">
      <div id="topmenu">
               <div id="logo">
                     <img src="img/logo-left.png" alt="BhatkalNews" />
                </div>

                <div id="navigation">
                    <ul>
                        <li>Contact</li>
                        <li>Photo</li>
                        <li>Video</li>
                    </ul>
                 </div>
       </div>
</div>

i have used the reset.css, and here is the css code.

/* top-menu */
div#topmenu {
    width:940px;
    margin:0 auto!important;
}
div#logo {
    width:289px;
    padding: 30px 0 0 0;
}

/*navigation */

div#navigation {
    width:446px;
    float:left; 
}

the navigation div places the ul,li below the logo, whereas i want it to align it from the left side right after the logo. what am i missing?

Answer 1

Your #logo element should contains float: left;. I'm not sure if #navigation should have float style, but if you want to keep it, you should add another div element right after #navigation with style clear:both:

<div id="navigation">
    <ul>
        <li>Contact</li>
        <li>Photo</li>
        <li>Video</li>
    </ul>
</div>
<div style="clear:both; width: 1px;" />

This should do the trick :)

Regards

Answer 2

Add float:left to #logo - this will align both elements.

See http://css.maxdesign.com.au/floatutorial/introduction.htm