Geek asks and answers

An absolute positioned div is disabled by the parent.

I have a setup like:

http://jsbin.com/hevidoya/2/

As you can see, a lot of the text of the material wraps around as it seems to press against the edge of its parent. I want the inner div to be able to breathe and the contents contained in its container. I am not sure how to resolve this, but I always thought that an absolutely positioned element would break the box model and would not behave like that. Since the parent object is relative, it will start its position relative to the parent, but the width will be able to go beyond its parents container. The more I decrease the left value, the better the behavior of the box, but it is in the center where I want it. I also looked at the loading CSS code for creating dropdowns, and I think I am doing pretty much the same thing.

Can someone explain how to fix this, and maybe explain why this is happening?

+3
source share
2 answers

You can use white space: nowrap css

<div style="position: absolute; top: 20px; left: 50px; white-space:nowrap;">
     <p>lots of stuff</p>
</div>

This will prevent the logical wrapping (line break) of your content because the div is contained inside the parent element.

0
source

You need to set the width property in the absolute positional element.

width: 100%

-1
source

More articles:


All Articles