Question

I have this markup:

div#wrapper
  ul#container1
    li#box1
    li#box2
    li#box3
  ul#container2
    li#box4
    li#box5
    li#box6

The screen’s width is enough to display 5 boxes on one row, but the whole container 2 is below container 1 when I float left the uls

How can I have the first line on the screen display boxes 1 to 5 and the second line box 6 (as if all lis were inside a single container and floated left) while keeping the lis inside two different containers ?

Thanks

Answer 1

Give the ul elements display: inline and the li elements display: inline-block

See here: http://jsfiddle.net/hW7Aj/1/

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li> 
</ul>
<ul>
    <li>4</li>
    <li>5</li>
    <li>6</li> 
</ul>

CSS

ul {
    display: inline;
}

li {
    display: inline-block;
    width: 80px;
    border: 1px solid black;
}