Question

My html is pretty simple:

<div class="navigation">
    <li><a id="button" href="#" <img src=""></a></li>
    <li><a id="button2"  href="#" <img src=""></a></li>
    <li><a id="button3"  href="#" <img src=""></a></li>
</div>

And my css is:

.navigation {
margin-top:35px;
margin-left: -290px;
list-style-type: none;
}

.navigation li{
display: inline;
}

#button, #button2, #button3 {

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
padding: 30px;
float: left;
margin-left: 390px;
}

#button{
 background-image: url("../images/homebutton.png");
}
#button2 {
background-image: url("../images/gmailbutton.png");
background-repeat: no repeat;
}
#button3 {
background-image: url("../images/blogbutton.png");
}  

Now it looks fine when the browser window is open, but when I close the window the images start stacking vertically instead of just disappearing when the window rolls over. Any ideas??? Thanks 🙂

Answer 1

Assuming you change the .navigation element to be a ul or ol (validity is important), then you can simply add: white-space: nowrap; to force the elements to all appear on one line, instead of wrapping (as an inline element naturally will, and should):

.navigation {
    margin-top:35px;
    margin-left: -290px;
    list-style-type: none;
    white-space: nowrap;
}

JS Fiddle proof-of-concept.

And please note the corrected a and img tags.