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>

Answer 1

Hi used display properties as like this

ul li{
display:inline-block;
}

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

Answer 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 li s will create a visible gap - so you can't put any whitespace between the li s, 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/

Answer 3

I don't really understand what you want to do, but I'll try my best. I think you need to put div width in percentage

div {
  width: 100%;
}

And all your other element also should have width in percentages

Answer 4

Set width value of all elements (particularly <li> ) in percentage, not in pixels; for ex, if you have 5 li, give them width:20%. their parent;s width should be 100%

Answer 5

By the sounds of it you want a fluid layout that will keep its basic design, shape and content layout no matter what the resolution, browser size or device. To be honest a fluid layout is best for this and there are many open source solutions.

Have a look at this http://cssgrid.net/

Answer 6

div {
    width:auto;
}

job done.