How to do this in CSS

My markup looks like this:

<div class="header-section">
    <a href="#" class="logo"><img src="logo.png" /></a>
    <div class="navigation">
        <ul>
            <li><a href=# class="active">Home</a></li>
            <li><a href=#>Bakery</a></li>
            <li><a href=#>Fishery</a></li>
            <li><a href=#>Casino</a></li>
            <li><a href=#>Disney Land</a></li>
   开发者_如何学运维     </ul>
    </div>
    <div style="clear:both" />
</div>

and the css that matters is:

.header-section {
    margin: 30px 0;
}

.header-section .logo {
    float: left;
}
.header-section .logo img{
    border: 0;
}
.header-section .navigation {
    float: right;
    margin-top: 23px;
}
.header-section .navigation ul {
    list-style: none;
}
.header-section .navigation ul li{
    font-size: 18px;
    font-family: Tahoma, Arial, Verdana;
    float: left;
    margin: 0 20px;
}

So the links are formatted in a horizontal line to the right of the logo. Initially I had the idea to have them just wrap when the screen real estate did not allow them to be in one line but then what actually happened was that before wrapping, they fell below the logo. I was happy with this until I saw that - ironically - IE rendered it the way I had in mind.

So my question is - how do I get the links to wrap before just snapping below the logo image?

make tag as a block element:

and add width & height..

.header-section a {
display:block;
width:100px;
height:100px;
}

Try putting <a href="#" class="logo"><img src="logo.png" /></a> after navigation div end and fix width of both section... It should work