Geek Answers Handbook

A fixed position with a width and height in content (rather than 100%)

I have a DIV container set to "position: fixed", which includes another set of divs to set an absolute value.

Is there a way to do this: a div with width and height to fit the content, and not always 100%?

This is what I have: http://jsfiddle.net/ydSqU/

<div class="transparent_background"> <div id="window">hello.</div> </div>

Here's what I would like: http://jsfiddle.net/3BYPu/ (without having to manually set the width / height).

 <div class="transparent_background"> <div id="window" style="width:30px; height:30px">hello.</div> </div>
+6
source share
4 answers

aur0n,

If possible, the best and easiest way to do this is to use javascript to calculate the height and width of the elements, and then place the inner element accordingly.

To accomplish this, you simply take the width of the containing element and divide it by two, then set the left value of the inner element to this value minus half its width. Then do the same for height.

Also, one of the things you might have missed is that your inner div should be set to position: relative and display: inline . The reason your div is stretched to fit the width of the containing element is because position: absolute takes the element out of the normal stream, and position: relative leaves it in the normal stream.

Here is the code I used (using jQuery):

 // centering the width $("#window").css("left", ($(".transparent_background").width()/2)-($("#window").width()/2) + "px"); // centering the height $("#window").css("top", ($(".transparent_background").height()/2)-($("#window").height()/2) + "px");

With this solution, you do not need to manually set the width and height. In addition, having an internal div with multiple lines of text will not be a problem.

script: http://jsfiddle.net/ydSqU/3/

+3
source

@ aur0n change css this way

 #window { border:2px dotted red; background:white; position: absolute; clear:both; }
+1
source

Can you try below

  #window { border:2px dotted red; background:white; width:50%; height:auto; position: absolute; top: 50%; left: 50%; margin-left: -25%; vertical-align:center; }
+1
source

try the following:

 #window { border:2px dotted red; background:white; position: absolute; display: inline-block; height: 1.2em; line-height: 1.2em; top: 50%; margin-top: -0.6em; margin: auto;

}

http://jsfiddle.net/3BYPu/1/

0
source

More articles:


All Articles