UL display: block

I am not sure if this is the right way to do this but I am trying to align a number of ULs beside each other and should drop the third UL when the screen size is smaller. I just need help with the CSS because for some reason, they keep stacking on top of one another even though I already changed the width to 50%. I already created the '@media'.

HTML:

<ul> <li>Content 1</li> </ul> <ul> <li>Content 2</li> </ul> <ul> <li>Content 3</li> </ul> 

CSS:

ul { display: block; width: 100%; float:left; } @media (max-width: 767px){ ul { width: 50%; } } 

4 Answers

You need to remove the display: block, and width: 100%. And make display: inline-block

ul { display: inline-block; float:left; overflow: auto; } 

Since making width: 100% will cover up the whole width, you are getting the uls one down another

You don't need the @media.

You need to use display:inline on your lists.

Have a look here: EXAMPLE

This is all you need.

HTML

<ul> <li>Content 1</li> </ul> <ul> <li>Content 2</li> </ul> <ul> <li>Content 3</li> </ul> 

CSS

ul { display:inline-block; float:left; } 

You can see it over here :

Try changing the window size .

CSS code

{ display: block; color: #FFF; background-color: #036; width: 9em; padding: 3px 12px 3px 8px; text-decoration: none; border-bottom: 1px solid #fff; font-weight: bold; } #navcontainer a:hover { background-color: #369; color: #FFF; } 

In html code

<div> <ul> <li><a href="#">Milk</a> <ul> <li><a href="#">Goat</a></li> <li><a href="#">Cow</a></li> </ul> </li> <li><a href="#">Eggs</a> <ul> <li><a href="#">Free-range</a></li> <li><a href="#">Other</a></li> </ul> </li> <li><a href="#">Cheese</a> <ul> <li><a href="#">Smelly</a></li> <li><a href="#">Extra smelly</a></li> </ul> </li> </ul> </div>