Set the div width as per content

Question

I need to set the div width as browser default width. This div is containing 'ul' and 'li' elements. I need to increase the div width When 'li' content increases and aslo when browser is minimized this li elements should not go down (happening now) instead browser should provide horizantal bar. Any help?

Div structure is

<div style="position:relative;border:1px solid red; line-height:16px;width:100%">
    <ul style="position:relative;background:green;height:30px; width:100%;list-style:none; margin:0;">
        <li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li>
        <li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li>
        <li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li>
        <li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li>

    </ul>

</div>

Solution 1

Hi used display properties as like this

ul li{
display:inline-block;
}

Live demo here http://jsfiddle.net/cL9FB/

Solution 2

Rohit was close, but the display: inline-block needs to be applied to the div, not to the li. Also, width: 100% on your div and ul will actually do the opposite of what you want; take it off.

Also, you wanted no word-wrapping - I'm not sure whether that's possible to achieve with floats, but it is possible with display: inline-block, which does almost the same thing. That means removing float: left, because that will override any display declaration. After that, just add white-space: nowrap to the div or ul to prevent word-wrapping.

Using display: inline-block does create the annoying quirk that any whitespace between the lis will create a visible gap - so you can't put any whitespace between the lis, not even newlines. I like to deal with this by moving the ending > sign to just before the starting < sign of the next tag - this solves the problem, since only whitespace between > and < counts.

Updated code:

<div style="position:relative; border:1px solid red; line-height:16px; display:inline-block">
    <ul style="position:relative; background:green; height:30px; list-style:none; margin:0; white-space: nowrap"
        ><li style="position:relative; padding-left:20px; display:inline-block; background:red" >Welcome</li
        ><li style="position:relative; padding-left:20px; display:inline-block; background:red" >Welcome</li
        ><li style="position:relative; padding-left:20px; display:inline-block; background:red" >Welcome</li
        ><li style="position:relative; padding-left:20px; display:inline-block; background:red" >Welcome</li
    ></ul>
</div>

jsFiddle: http://jsfiddle.net/gncGX/2/

Comments

[Srikanth]

The result with the given code is not as per my requirement. li element should float left. when browser is minimized li elements shouldnt go down.

[Daniele B]

can you explain a bit more extensively your answer? tnx

[Brilliand]

Whoops - apparently my code trimming was overzealous. I've edited my answer to only make the changes that are really necessary - hopefully it does meet your requirements now.