CODEWITHSUNDEEP
htmlcss
Miguel Moura
Miguel Moura

Reputation: 39394

White-space: nowrap makes elements to be outside of window

I am trying to have an UL on the right of a SPAN (http://jsfiddle.net/Shg9L/24/).

<div>
  <span>Categories</span>
  <ul>
    <li><a href="#">Book</a></li>
    <li><a href="#">Computer</a></li>
  </ul>
</div>

When the window is resized down the LIs should get stacked but not under the SPAN.

The problem is when I resize the window some of the LI items on the right becomes hidden.

I think it is because of "white-space: nowrap" but without it I'm not able to make it work.

Can this be solved?

Upvotes: 0

Views: 2036

Answers (2)

George
George

Reputation: 36784

Display your unordered list as a block and hide the overflow. It will then take up all the available width. The list items will stack neatly in line with the edge of the unordered list when there isn't enough room:

div ul {
    list-style: none;   
    padding: 0;
    margin: 0;
    display: block;
    overflow:hidden;
}

The white-space:nowrap on your container <div> isn't needed as far as I can see. You can remove it.

JSFiddle

Upvotes: 3

caramba
caramba

Reputation: 22480

http://jsfiddle.net/Shg9L/29/

removed a coupple of things and added position:absolute; and inline:display-block to some elements

div {background-color:orange;}

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

div ul {
    position:absolute;
    top:0px;left:100px;
    list-style: none;   
    padding: 0;
    margin: 0;
    display: inline-block;
}
div ul li {
    background-color: #F0F0F0;      
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 8px;  
    display:inline-block;
}

Upvotes: 0

Related Questions