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!
change div height according to content
Moderator: General Moderators
Re: change div height according to content
Code: Select all
$width = 120;
echo "<div style='width:$width px; float:left; background:#00CC33;'> </div>
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: change div height according to content
The height of a 'div' is automatically adjusted according to the amount of content placed inside it.janper wrote:hello. how can i change the height of a DIV according to its content?
“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
Hi,

This makes the div, increase and decrease based on the addition of content to the div.Height:auto;
width:auto;
Re: change div height according to content
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%;
}
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
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.
My advice is to learn what the defaults are for common elements and only apply styles where you want something other than the default.
You haven't said what your "problem" is.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?