CSS layer auto height "Layer size wont grow to child layer size "

**Sul** · 01-24-2009 05:44 PM

Hi

I've got a similar problem to this person: http://www.webdeveloper.com/forum/sh...ad.php?t=84830 - unfortunately he solved the problem himself but didn't post the solution!

I've got a file to show you what I am trying to do here: http://www.cinnamonjunkie.com/test.html

Source:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container{
height:auto;
background:#eee;
position:relative;
height:auto;

}

#content{
width:500px;
position:absolute;
left:100px;
top:50px;

}
</style>
</head>

<body>
<div id="container"><div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nisl  nibh, commodo vitae, aliquet nec, scelerisque in, sapien. Duis varius  ornare massa. Mauris sed mauris eget lectus tempor varius. Vestibulum  rhoncus. Maecenas leo libero, aliquet nec, dictum sit amet, vestibulum  et, nunc. Maecenas turpis. Vestibulum pharetra purus a mi. Nullam ut  nunc. Sed elementum sem. Suspendisse aliquet odio iaculis mi. Cras  posuere arcu sit amet eros. </p>
</div></div>
</body>

</html>

Basically the container layer isn't extending with the content layer as intended. I thought the height: auto property would sort it out but it hasn't.

Cheers

**Fang** · 01-25-2009 02:33 AM

What are you trying to do?

**Sul** · 01-25-2009 11:56 AM

Hi,

Apologies for not explaining myself properly.

Ignore the link to cinnamon junkie now - I've edited that html, as I have been experimenting. The original code I've pasted above is what is important.

I've got a container div which has certain background properties, etc, and then I've got another div which has some content, which I want to be place inside the container div. The problem is that it's not working as it would if it were say a table.

The equivalent with tables would be that I'd have a table cell and I'd set a background property for that cell and then insert another table/cell inside that and put contents into the table/cell I just inserted. The parent cell would then expand with the contents on the table/cell inside it. For some reason I can't get this to work with CSS/divs.

**Fang** · 01-25-2009 12:16 PM

See if this is the idea:

Code:

body {margin:0;padding:0;}
#container{
background:#eee;
width:500px;
margin:auto;
}
#content{
padding:5em;
}

**Sul** · 01-26-2009 04:06 AM

Solved this by using the float property on the container, using margins to position it and then using a div to clear floats so that the container stretches down behind the contents.

Thread: CSS layer auto height "Layer size wont grow to child layer size "

Thread Tools

Display

CSS layer auto height "Layer size wont grow to child layer size "

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions