/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Jan 24.2009

Hi

I’ve got a similar problem to this person: [url]http://www.webdeveloper.com/forum/showthread.php?t=84830[/url] – 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: [url]http://www.cinnamonjunkie.com/test.html[/url]

Source:

[code=html]<!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>
[/code]

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

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJan 25.2009 — What are you trying to do?
Copy linkTweet thisAlerts:
@SulauthorJan 25.2009 — 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.
Copy linkTweet thisAlerts:
@FangJan 25.2009 — See if this is the idea:body {margin:0;padding:0;}
#container{
background:#eee;
width:500px;
margin:auto;
}
#content{
padding:5em;
}
Copy linkTweet thisAlerts:
@SulauthorJan 26.2009 — 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.
×

Success!

Help @Sul spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...