I've got the following peace of code - http://jsfiddle.net/QkYvs/2/
<div id="parent">
<div id="childOne">
<div id="childTwo"></div>
</div>
</div>
#childTwo
is wrapping its text to the #parent
width. How can I make #childTwo's width to be its content's width?
Because the element, which you give absolute position take the width from his parent and didn't behave as a block element. It takes the width and height from its content. And only when the content is relatively positioned.
Clearly, nothing can be absolute and relative at the same time. Either you want the element to position itself based on another ancestor's position or based on the page flow.
By default a div is a block element, it means its width will be 100% of its container width, and its height will expand to cover all of its children. In case its children has a larger width than the div 's container width, the div itself does not expand horizontally but its children spill outside its boundary instead.
white-space:nowrap;
See this fiddle.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With