[RESOLVED] Auto size of divs by content

**yaront** · 08-11-2010 09:34 AM

Hi,

I'm trying to find information about how a div auto-sizes itself by it's content.
I'm encountering some strange behavior which I don't understand.

I have a container div and in it a content div. something really basic:

Code:

<div id="container">
<div id="content">
hello
</div>
</div>

The content div has padding and a border.
container is positioned absolute and content relative.
It seems that the container div is sizing it's width based only on the content area of the contained content div (ignoring the padding and border), but it's height IS considering both.

Any ideas as to why this is the case? (FF, safari, chrome).

And any ideas how I can fix this?

thanks
Yaron

**mikewgd** · 08-11-2010 02:08 PM

Can you possibly provide a link?

**yaront** · 08-11-2010 02:21 PM

Sorry, I don't have a link.

but here is a full version of a test I wrote. Using Safari, Chrome or FF with FireBug I can clearly see the container's size ignores the content's padding and border.

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html>
<head>
</head>


<body>
<div id="container">
<div id="content">
hello
</div>
</div>

<style type = "text/css">
#container {
	position:absolute;
	display:block;
	z-index:5000;
	
}

#content {
	position: relative;
	width:100%; 
	color:#555;
	padding:4px 10px 4px 10px;

	border:2px solid #ddd;

	margin: 0px;
	
	font-family:tahoma;
	font-size:11px;


	box-shadow: 0px 0px 6px #000;
	-moz-box-shadow: 0px 0px 6px #000;
	-webkit-box-shadow: 0px 0px 6px #000;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

</style>

</body>
</html>

**mikewgd** · 08-11-2010 02:28 PM

I see the padding. I have attached what I see in my FireFox.

**yaront** · 08-11-2010 03:41 PM

The way it looks on the screen is fine.

However, if you have FireBug installed and you trace through the DOM you see the container is small and the content div is overflowing it. It's because the container is the size of the text without the border and padding.

So the problem starts when I try to adjust other things according to the container's size.

**mikewgd** · 08-11-2010 03:53 PM

Couldn't you just do this:

<div id="content">hello</div>

<style type="text/css">
#content {
width:auto;
color:#555;
padding:4px 10px 4px 10px;
border:2px solid #ddd;
margin: 0px;
font-family:tahoma;
font-size:11px;
box-shadow: 0px 0px 6px #000;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
float:left;
display:block;

}

</style>

Is that what you want? You really dont need the other div surrounding it.

**yaront** · 08-11-2010 05:12 PM

Yes, that would work.

However, in my real code I add another div with an image inside the container (it's a small arrow pointing down which simulates a prompt bubble effect). And I want the container div to contain both the text and this arrow.

**aj_nsc** · 08-11-2010 05:16 PM

Why not just put the arrow inside the content div as a background image? (or a regular img tag for that matter?)

DIVITIS

**yaront** · 08-11-2010 06:20 PM

I guess I could do that.
In the meantime I solved my problem with JS (which is not ideal).

But I'm also trying to understand how css and rendering works.
I'm not quite sure why the container ignores it's content's padding and border. What in the css spec causes this behavior.

**aj_nsc** · 08-11-2010 06:27 PM

Did you look?

10.6.7 'Auto' heights for block formatting context roots

In certain cases (see the preceding sections), the height of an element is computed as follows:

(1) If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

(2) If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.

(3) Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.

http://www.w3.org/TR/CSS2/visudet.html#root-height

**yaront** · 08-12-2010 01:50 AM

Hey,

Yes, I did. The height property is indeed very straight forward, but I'm talking about the width. The documentation for it is not as clear (unless I didn't find the right place to look)

**therealanodyne** · 08-12-2010 04:08 AM

Could you tell us why the outer container has to be positioned absolute and the inner one relative ? The other way round could be more comprehensible.
There is a lot of issues when using positioned elements in different interconnections.

Anodyne

**yaront** · 08-12-2010 04:26 AM

Hi Anodyne,

What I'm doing is generating something like a tool-tip for certain fields. The tooltip has the actual text with a border and a small arrow-like triangle pointing at the control which the tool-tip belongs to.

So I'm using the 'container' div to hold both the content and the arrow. It is added to the container of the control, and positioned absolute based on the control's position in it's container.

As for content, I guess it can be absolute as well. Will that solve my problem?

**therealanodyne** · 08-12-2010 05:41 AM

Okay.

First off all you don't need a display: block for a div. A div is already a so called block element and display: block only blows up the code.

-

secondly you might have to use position: absolute on the tooltip to make it display outside the normal element flow which you actually want as I can tell from your z-index:5000. An absolute positioned element but "floats" outside the normal content flow and thus will be above the other elements anyway (as long as you don't have other elements with absolute position or z-index in the aerea.
So, if the latter is not the case: No z-index.

thirdly: why do you want a position: relative; for the inner div ? I cannot see a reason for this (and I don't know all the effects when using an outer absolute positioned div, I just know from experience that it could be problematic.)
May be you use a span tag instead of the div and give it your paddings and a certain width. It depends so much on what you want to do exactly. Shall the tooltip appear on hover over the element you are pointing to ? Is there always the same one word in the tooltip ? (text-align: center; would suffice in this case) and so on.

By coincidence I am struggeling with a tooltip myself in the moment and CHROME (IRON) and SAFARI (both webkit engine browsers) don't render a display: inline; properly. You see, to be able to solve a problem one would need much more information.

Just for the record here my tooltip try, it points to links and should display left of the link element on hover over the link (just ignore the colors):
<code>
a.content-tooltip span {
display: none;
padding: 2px 4px;
width: 160px; /*my favourite width in the used layout, various texts*/
margin-left: 5px; /*the distance to the link element*/
border: 1px solid #F6ECB4;
background: #0F1D39;
color: #D25B00;
line-height: 15px;
letter-spacing: 1px;
}
a.content-tooltip:hover span {
display: inline; /*to make the tooltip follow the link inline*/
position: absolute; /*to get the tooltip out of the normal flow so it displays on top of the following elements*/
}
</code>

Cheers,
Anodyne
html-syntax:
<code>
<a class="content-tooltip" href="thisAndThat.html">Blabla<span>Tooltip</span></a>
</code>

works fine even in IE7, of course in FIREFOX and OPERA but displays the tooltip not inline in CHROME and SAFARI as mentioned before. So you see, I need some clues as well

**therealanodyne** · 08-12-2010 05:46 AM

Addendum:
Apply the border and border radius stuff to the outer container (much better) or use a p tag instead of a span.

Anodyne

Thread: [RESOLVED] Auto size of divs by content

Thread Tools

Display

[RESOLVED] Auto size of divs by content

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions