CODEWITHSUNDEEP
csshtmlwidth
Srikanth
Srikanth

Reputation: 683

Set the div width as per content

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>

Upvotes: 2

Views: 13660

Answers (6)

Brilliand
Brilliand

Reputation: 13714

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/

Upvotes: 1

Matthew Evans
Matthew Evans

Reputation: 245

div {
    width:auto;
}

job done.

Upvotes: 0

RSM
RSM

Reputation: 15118

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/

Upvotes: 0

madeye
madeye

Reputation: 1406

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

Upvotes: 0

jumancy
jumancy

Reputation: 1340

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%

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Hi used display properties as like this 

ul li{
display:inline-block;
}

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

Upvotes: 6

Related Questions