Please look at this example http://jsfiddle.net/xcYum/1/

1. I want to know why is the div tag (with class=progress) the content is broken into two lines instead of just one line (i.e. your progress vs your\nprogress). I should NOT need to specify the width for the 'div class=progress'. can you please give me an explanation that has all the css and/or html element types (or boxing whatever reason) this happens? I just want to know exactly how the rules actually work, rather than memorizing cases it works or doesn't work.

2. it seems if i change the .container css to the following: .container { position: relative; } then the div tag (with class=progress) now displays in single line, why is relative and absolute make such difference? or is it because it is nested?

3. how do we avoid nested absolute positioned div tags?? is it wrong or bad practice to have such structure. i am using it in this example is because i want '100%' and 'your progress' to be positioned based on 'div class=container' tag, then i can just move the 'div class=container' tag around. in other words, doing this way, i can just move one thing ('div class=container' tag) to make 2 things move (100% and 'your progress'), the other way around is more work. What is wrong with my thought process here?

• html
• html5
• css3
• css

1. Because an absolutely positioned element shrink-wraps, in other words, it becomes as small as possible. You can force text to never wrap using white-space: nowrap

2. Not sure why this happens

3. You don't need absolute positioning for an elements children to move with the parent

1. Absolute element establishes a new containing block for normal flow children, and for descendants whose position property is set to absolute.

   Reference: http://reference.sitepoint.com/css/absolutepositioning

2. Same as first answer

3. Absolute element is positioned with respect to its containing block. So, you just need a parent 'div class=container' to have relative position and then all its elements with absolute position will move with it.

   Reference: http://reference.sitepoint.com/css/absolutepositioning