3

I have a div that shows some text and is absolutely positioned on a page. While it is absolutely positioned the div is just large enough to show the text it contains. When I add an inline style to that div to change it to be relatively positioned, the width of the div suddenly expands to take up 100% of the page...

I used the Chrome dev tools to toggle the relative position on/off. Turning it off causes the width to be correct, turning it back on causes the div to expand. It is an inline style so there isn't any CSS class or selector that is changing the width on me.

I experience the same issue in Firefox. Removing position: relative in Firebug causes the width to shrink back down to be just wide enough to fit the text.

double-beep
  • 5,031
  • 17
  • 33
  • 41
Matt Wonlaw
  • 12,146
  • 5
  • 42
  • 44
  • possible duplicate of [Position Relative vs Position Absolute?](http://stackoverflow.com/questions/10426497/position-relative-vs-position-absolute) – sandeep May 05 '12 at 04:35
  • check this http://stackoverflow.com/questions/5323177/absolute-vs-relative-position-width-height – sandeep May 05 '12 at 04:36
  • @sandeep thanks for the links. Is there any way to get a relatively positioned element to size based off its content instead though? – Matt Wonlaw May 05 '12 at 04:43
  • 2
    you can give float, display:inline or display:inline-block to your DIV – sandeep May 05 '12 at 04:50
  • @sandeep inline-block worked perfectly. Thanks man. If you post it as an answer I'll accept it for you. – Matt Wonlaw May 05 '12 at 06:21

3 Answers3

3

If you want relative position DIV take his content width then you can give float, display:inline or display:inline-block to your DIV

sandeep
  • 91,313
  • 23
  • 137
  • 155
0

could you please post the HTML and CSS, and I could have a look at it.. Meanwhile you might wanna have a look at Position an HTML element relative to its container using CSS and see if that could possibly help you?

Community
  • 1
  • 1
MNilson
  • 330
  • 1
  • 8
0

to change size as content grows/shrinks use something like:

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

Which will mean it'll vary between 30 and 300 px depending on content

or

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

which will vary between 30px and as big as its container will allow (so forever, essentially)

d-_-b
  • 21,536
  • 40
  • 150
  • 256