CODEWITHSUNDEEP
htmlcss
Miguel Moura
Miguel Moura

Reputation: 39364

Place UL on right of SPAN

I need to have an UL on the right side of a SPAN (http://jsfiddle.net/Shg9L/8/).

When the width is not enough I would like the UL to keep being on the right side of the SPAN but the LI items to start stacking ...

The problem is that when I resize down the window the UL goes under the SPAN.

The code I currently have is (http://jsfiddle.net/Shg9L/8/):

HTML

<div>
  <span>Categories</span>
  <ul>
    <li><a href="#">Book</a></li>
    <li><a href="#">Computer</a></li>
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Toy</a></li>
    <li><a href="#">Music</a></li>
    <li><a href="#">Audio</a></li>
    <li><a href="#">Game</a></li>
  </ul>
</div>

CSS

div {.clear;}

div span {
  background-color: #E0E0E0;      
  float: left;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 8px;  
}

div ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  .clear;    
}

div ul li {
  background-color: #F0F0F0;      
  float: left;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 8px;  
}

.clear:after {
  content: "";
  display: table;
  clear: both;
}

Does anyone knows how to solve this?

Thank You, Miguel

Upvotes: 0

Views: 88

Answers (2)

MarijnS95
MarijnS95

Reputation: 4793

You can use div {white-space:nowrap;} to make sure it doesn't break on the contents of the div. The ul has display:inline-block; instead of float: left;. Float left makes it go to the left, leaving the flow of the text, and inline-block still keeps it in the flow of the text, while not taking up a new line.

demo

Upvotes: 2

Karuppiah RK
Karuppiah RK

Reputation: 3964

Fiddle

remove float:left; in your div ul

Upvotes: 2

Related Questions