change div height according to content

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
janper
Forum Newbie
Posts: 6
Joined: Wed Jun 02, 2010 5:55 pm

change div height according to content

Post by janper »

hello. how can i change the height of a DIV according to its content? i don't know the content in advance because i load it from an external HTML using an iframe. well, maybe i need to change the size of the iframe too, however it's set to 100%

thnaks!
JakeJ
Forum Regular
Posts: 675
Joined: Thu Dec 10, 2009 6:27 pm

Re: change div height according to content

Post by JakeJ »

Code: Select all

$width = 120;
echo "<div style='width:$width px; float:left; background:#00CC33;'> </div>
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: change div height according to content

Post by social_experiment »

janper wrote:hello. how can i change the height of a DIV according to its content?
The height of a 'div' is automatically adjusted according to the amount of content placed inside it.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
bestwebdesigner
Forum Newbie
Posts: 9
Joined: Mon Jan 31, 2011 4:38 am

Re: change div height according to content

Post by bestwebdesigner »

Hi,
Height:auto;
width:auto;
This makes the div, increase and decrease based on the addition of content to the div. :wink:
7AN_B
Forum Newbie
Posts: 1
Joined: Sun Mar 06, 2011 11:59 am

Re: change div height according to content

Post by 7AN_B »

hello guys,
i'm quite new to programming.

i got this problem of setting the height automatically.

i attach the code of both page and css, please someone
could help me to find where i'm wrong?

thanks in advance.

this is the result: http://creactivebrains.com/test3.php

and this is the code:

PAGE
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="style.css" rel="stylesheet" type="text/css" />

<div id="container">
<div id="header"></div>
<div id="body">
<div id="content1"></div>
</div>
<div id="footer"></div>
</div>
</html>

STYLE
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
height:auto;
width:auto;
float:left;
padding:0px;
padding-bottom:60px; /* Height of the footer */
}
#content1 {
display:inline-block;
position:absolute;
width:1029px;
height:1700px;
min-height:100%;
left:50%;
top:auto;
margin-left:-515px;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
background:#003299;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}



#container {
height:100%;
}
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: change div height according to content

Post by califdon »

For one thing, you have 2 different styles specified for the container id, so the first one will be ignored. Then you are using "body" as an id--a very bad idea, since it is a special word in HTML syntax. In general, I would say you are grossly over styling everything. There's no point (as far as I know) in applying a style to "html"; I don't think it is even a valid descriptor. And much of your styling is just re-stating the defaults, which just makes it harder to read your code.

My advice is to learn what the defaults are for common elements and only apply styles where you want something other than the default.
7AN_B wrote:i got this problem of setting the height automatically.

i attach the code of both page and css, please someone
could help me to find where i'm wrong?
You haven't said what your "problem" is.
Post Reply