difference between width auto and width 100% for floated elements

Question

As specified in the answer of difference between width auto and width 100 percent the width auto takes full width but in this demo the width auto doesn't take the full width but when we apply 100% to this then only it takes full width. How the width auto takes its element actually?

Demo summary

html

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

css

ul{background-color: gray;}
li{background-color: red; float: left; clear: left; width: auto;}

You have answered this.... http://stackoverflow.com/questions/17468733/difference-between-width-auto-and-width-100-percent/17468803#17468803 — Dhaval Marthak, Jul 05 '13 at 08:20
100% = width of parent ::; auto = depending on other params (display|float) may be as parent or as less as its possible — Svetoslav, Jul 05 '13 at 08:21
Yeah! I've answered the question but asking here the width auto when we float the elements. — Bhojendra Rauniyar, Jul 05 '13 at 08:35

Falguni Panchal · Answer 1 · 2013-07-05T08:44:30.917

0

try this

http://jsfiddle.net/p5bQP/1/

CSS

ul{
  background-color: gray; 
  float:left;
  }
li{
  background-color: red; 
  float: left; 
  clear: left; 
  width:100%;
  }

edited Jul 05 '13 at 08:44

answered Jul 05 '13 at 08:20

Falguni Panchal

8,873
3
27
33

I'm asking the width auto vs percentage. – Bhojendra Rauniyar Jul 05 '13 at 08:22

score 0 · Answer 2 · answered Jul 05 '13 at 08:25

0

The problem ist the floating on the li element.

If you remove the floating part from your css like that:

ul{background-color: gray;}
li{background-color: red; width: auto;}

then it works fine.

answered Jul 05 '13 at 08:25

mordilion

33
1

I know that but why floating element doesn't take its full width by assigning auto but takes 100%. – Bhojendra Rauniyar Jul 05 '13 at 08:26
Floating elements was handled like an inline-element. [http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm] – mordilion Jul 05 '13 at 08:34
If so width 100% also should take as width auto. – Bhojendra Rauniyar Jul 05 '13 at 08:36

difference between width auto and width 100% for floated elements

2 Answers2