Page 1 of 1

change div height according to content

Posted: Wed Jun 02, 2010 6:47 pm
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!

Re: change div height according to content

Posted: Thu Jun 03, 2010 11:34 pm
by JakeJ

Code: Select all

$width = 120;
echo "<div style='width:$width px; float:left; background:#00CC33;'> </div>

Re: change div height according to content

Posted: Sat Jun 05, 2010 3:57 am
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.

Re: change div height according to content

Posted: Mon Feb 07, 2011 9:04 am
by bestwebdesigner
Hi,
Height:auto;
width:auto;
This makes the div, increase and decrease based on the addition of content to the div. :wink:

Re: change div height according to content

Posted: Sun Mar 06, 2011 12:05 pm
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%;
}

Re: change div height according to content

Posted: Sun Mar 06, 2011 3:38 pm
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.