Geek asks and answers

An absolutely positioned div changes the width, making it relatively positioned

The strangest thing is happening.

I have a div that shows some text and is absolutely positioned on the page. Although it is absolutely positioned, the div is large enough to show the text that it contains. When I add an inline style to this div to change its relative position, the width of the div suddenly widens to occupy 100% of the page ...

I used chrome dev tools to enable / disable relative position. Disabling it leads to the correct width, and when you rotate it again, the div expands. This is an inline style, so there is no CSS class or selector that changes the width.

I have the same problem in Firefox. Removing "position: relative" in Firebug causes the width to decrease to be wide enough to fit the text.

+3
source share
3 answers

If you want the position of the relative DIV to occupy its width of the content, you can give float, display:inlineor display:inline-blockfor your DIV

+3
source

Could you post the HTML and CSS, and I could look at it. In the meantime, you can take a look at the Place HTML element relative to its container using CSS . and see if this can help you?

0
source

to resize when content grows / shrinks, use something like:

<div style="min-height:30px;max-height:300px;">

This will mean that it will vary from 30 to 300 pixels depending on the content.

or

<div style="min-height:30px;height:auto;">

which will range from 30 pixels to a size sufficient for its container (so forever, essentially)

0
source

More articles:


All Articles