Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make absolute div assume content's width?

Tags:

html

css

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?

like image 796
gespinha Avatar asked Oct 20 '13 22:10

gespinha


People also ask

Why does position absolute affect 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.

Can a div be position absolute and relative?

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.

What determines the size of a div?

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.


1 Answers

white-space:nowrap;

See this fiddle.

like image 129
Justin Lessard Avatar answered Sep 28 '22 18:09

Justin Lessard