1. Home
  2. Forums Index
  3. Browser Side / CSS 2:22 am May 22, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Dynamically Resize a DIV to Fit Contents

         

tidalwav1

6:27 pm on Apr 22, 2008 (gmt 0)

10+ Year Member



I'm working on a relatively simple site layout, but am having an issue with it. I'm trying to display content in a DIV (#maincontent) inside another DIV (#maincontainer) that is absolutely positioned, and has its height and min-height attributes set at 100%. #maincontainer's top is offset by 150 pixels in order to accommodate a navigation bar and site logo at the top of the page.

When #maincontent is not filled all the way up with text, the page renders correctly in Safari 3.1, IE 7 and Firefox 2.0.14. However, when lots of text is present, eventually the text spills outside of #maincontent and past even the bottom of #maincontainer.

I'd like to have #maincontainer dynamically resize to fit the text inside #maincontent, or otherwise not have #maincontent contents spill past the bottom of the container, making them unreadable. Is this possible?

I've included my very-stripped-down HTML/CSS below. Note that the actual page uses images for div corners, etc which were obviously not attached, so some things will render improperly if you view the page, but solving my problem should be independent of those issues.

Thanks for any help anyone can provide.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="./stylesheet.css" />
</head>
<body>

<div id="header">
<table style="width:100%; height:100%;">
<tr>
<td style="text-align: left;"><a href="index.php"><img style="border:0px;" src="images/logo.png" alt="Logo" /></a></td>
<td valign="bottom" style="text-align: right;">
<div class="table">
<ul id="horizontal-list"><li class="selected"><a class="selected" href="#">Selected Section</a></li><li><a href="#">Unselected Section</a></li></ul>
</div>

</td>
</tr>
</table>
</div>

<div id="maincontainer">
<div class="top_corners"><div></div></div>
<div id="maincontent">
<div id="subnav"><a href="#">Unselected Subsection</a> ¦ <a class="selected" href="#">Selected Subsection</a></div>
<br /><br />
Actual content would go here, filling page.
</div>
</div>

</body>
</html>

CSS:
* {margin:0px;padding:0px}

body {
height:100%;
font-family:"lucida sans", verdana, arial, helvetica, sans-serif;
}

html {
background:#000;
height:100%;
}

.top_corners {
background: transparent url("images/tr.gif") no-repeat top right;
}

.top_corners div {
background: transparent url("images/tl.gif") no-repeat top left;
}

.top_corners div, .top_corners {
width: 100%;
height: 10px;
}

#maincontainer {
position:absolute;
background:#FFF;
right:0px;
/*
Unorthodox centering method to center absolutely-positioned elements in IE.
margin-left:auto; margin-right:auto; should really be used. Darn IE.
*/
left: 50%;
margin-left:-384px;
width:768px;
top:150px;
min-height:100%;
height:100%; /* Because IE6 is dumb. */
}

#maincontent {
text-align:justify;
position:absolute;
padding:10px;
}

#maincontent a {
color:#000;
text-decoration:none;
border-bottom:1px dotted #000;
}

#header {
position:absolute;
top:0px;
right:0px;
/*
Unorthodox centering method to center absolutely-positioned elements in IE.
margin-left:auto; margin-right:auto; should really be used. Darn IE.
*/
left:50%;
margin-left:-363px;
width:726px;
height:155px;
color:#FFF;
font-size:25px;
}

.table {
display:table; /* Allow the centering to work */
margin:0 auto;
}

ul #horizontal-list {
list-style:none;
padding-top:20px;
display:inline;
}

#horizontal-list li.selected {
display:inline;
padding:2px 0 2px 6px;
background:#FFF url("images/tltab.gif") top left no-repeat;
}

#horizontal-list li.selected a.selected {
padding:2px 6px 2px 0;
text-decoration:none;
background:url("images/trtab.gif") top right no-repeat;
color:#000;
}

#horizontal-list li {
display:inline;
padding:2px 0 2px 6px;
background:#000;
}

#horizontal-list li a {
padding: 2px 6px 2px 0;
text-decoration:none;
background:#000;
color:#FFF;
}

#subnav {
position:absolute;
top:5px;
left:0px;
width:768px;
text-align:center;
padding-bottom:10px;
border-bottom:1px solid #000;
font-size:16px;
}

#subnav a {
text-decoration:none;
border-bottom:none;
color:#000;
padding:3px;
}

#subnav a.selected {
font-style:normal;
color:#FFF;
background:#000;
padding:3px;
}

JAB Creations

9:08 pm on Apr 22, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What is this content you speak of? All I see is a template.

Also you should stick your CSS in to style elements to allow others to skip reconstructing your page. Also please post using [.quote.] and [./.quote.] BB code (without the periods, used to keep the site from parsing). I'd recommend using a lipsum generator to create some text content.

In CSS1 a block-level element (divisible (div) element as being the default generic block-level element will automatically use 100% of available width if it does not float or have a specified width, width: auto; will also do this. That means without a float and an auto-width the border, margin, and padding will be subtracted (the "normal" table "behavior"). Once you either/or/both float/set a width the border/margin/padding will be added to the width. When you float the block-level element will take up only the necessary amount of width.

Stay away from tables unless you have tabular data, otherwise you won't learn the basics of CSS.

Your current file with some improvements though it's up to you to give us a better visual of what you don't want happening on the page...

<?php if (stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")) {header("Content-type: application/xhtml+xml");} else {header("Content-type: text/html");} echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0px;padding:0px}

body {
height:100%;
font-family:"lucida sans", verdana, arial, helvetica, sans-serif;
}

html {
background:#000;
height:100%;
}

.top_corners {
background: transparent url("images/tr.gif") no-repeat top right;
}

.top_corners div {
background: transparent url("images/tl.gif") no-repeat top left;
}

.top_corners div, .top_corners {
width: 100%;
height: 10px;
}

#maincontainer {
position:absolute;
background:#FFF;
right:0px;
/*
Unorthodox centering method to center absolutely-positioned elements in IE.
margin-left:auto; margin-right:auto; should really be used. Darn IE.
*/
left: 50%;
margin-left:-384px;
width:768px;
top:150px;
min-height:100%;
height:100%; /* Because IE6 is dumb. */
}

#maincontent {
text-align:justify;
position:absolute;
padding:10px;
}

#maincontent a {
color:#000;
text-decoration:none;
border-bottom:1px dotted #000;
}

#header {
position:absolute;
top:0px;
right:0px;
/*
Unorthodox centering method to center absolutely-positioned elements in IE.
margin-left:auto; margin-right:auto; should really be used. Darn IE.
*/
left:50%;
margin-left:-363px;
width:726px;
height:155px;
color:#FFF;
font-size:25px;
}

.table {
display:table; /* Allow the centering to work */
margin:0 auto;
}

ul #horizontal-list {
list-style:none;
padding-top:20px;
display:inline;
}

#horizontal-list li.selected {
display:inline;
padding:2px 0 2px 6px;
background:#FFF url("images/tltab.gif") top left no-repeat;
}

#horizontal-list li.selected a.selected {
padding:2px 6px 2px 0;
text-decoration:none;
background:url("images/trtab.gif") top right no-repeat;
color:#000;
}

#horizontal-list li {
display:inline;
padding:2px 0 2px 6px;
background:#000;
}

#horizontal-list li a {
padding: 2px 6px 2px 0;
text-decoration:none;
background:#000;
color:#FFF;
}

#subnav {
position:absolute;
top:5px;
left:0px;
width:768px;
text-align:center;
padding-bottom:10px;
border-bottom:1px solid #000;
font-size:16px;
}

#subnav a {
text-decoration:none;
border-bottom:none;
color:#000;
padding:3px;
}

#subnav a.selected {
font-style:normal;
color:#FFF;
background:#000;
padding:3px;
}
</style>
</head>
<body>

<div id="header">
</div>

<div id="maincontainer">
<div class="top_corners"><div></div></div>
<div id="maincontent">
<div id="subnav"><a href="#">Unselected Subsection</a> ¦ <a class="selected" href="#">Selected Subsection</a></div>
<br /><br />
Actual content would go here, filling page.
</div>
</div>

</body>
</html>

tidalwav1

11:21 pm on Apr 22, 2008 (gmt 0)

10+ Year Member



First of all, I removed all of the actual content from my posted code as per the forum rules, which state that links to personal sites aren't allowed and that the minimum amount of code possible in order to understand the problem should be posted.

I also tried posting with [code], but for some reason these BBCode tags would only affect the first 'paragraph' of code, so I decided to leave them out entirely, rather than inserting an obscene amount of [code] tags.

Finally, my issue has nothing to do with width. Text spills off the bottom of the page, as seen in this screenshot, clipped from Firefox 2: <>
The text in the screenshot is partially highlighted so that the problem becomes clear (the spilled-off black text can't be seen on a black background otherwise.)

Ideally, I want to make the white area of the page extend all the way to the bottom of the page, so that all text is always visible, and so that it doesn't spill past the bottom of the white area.

How can I go about doing that?

[edited by: SuzyUK at 9:11 am (utc) on April 23, 2008]
[edit reason] Please No example URI's see charter [/edit]

JAB Creations

5:46 am on Apr 23, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



These forums don't use [ code ], use [ quote ] here instead like I mentioned in my first post.

By not adding some sort of content to your example you effectively don't really have an example. Having other posters do your work to create your example puts us one step behind helping you. Had I known what the issue was you would have had the answer hours ago. So please heed advice as it's intended to help you understand how to help others understand the issue hence help you find an answer quicker.

Three things...

First remove all of your IE specific code out of the main style sheet and read about conditional comments [msdn2.microsoft.com], serve a second style sheet that overrides the standards and corrects IE.

Second use the overflow property.

Lastly you probably will want to just position your main content to emulate an iframe instead of doing what you are here.

- John

#body {
position: absolute;
overflow: auto;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
}

<body>
<div id="body">
</div>
</body>

<?php if (stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")) {header("Content-type: application/xhtml+xml");} else {header("Content-type: text/html");} echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0px;padding:0px}

body {
height:100%;
font-family:"lucida sans", verdana, arial, helvetica, sans-serif;
}

html {
background:#000;
height:100%;
}

.top_corners {
background: transparent url("images/tr.gif") no-repeat top right;
}

.top_corners div {
background: transparent url("images/tl.gif") no-repeat top left;
}

.top_corners div, .top_corners {
width: 100%;
height: 10px;
}

#maincontainer {
position:absolute;
background: #fff;
overflow: auto;
right:0px;
/*
Unorthodox centering method to center absolutely-positioned elements in IE.
margin-left:auto; margin-right:auto; should really be used. Darn IE.
*/
left: 50%;
margin-left:-384px;
width:768px;
top:150px;
min-height:100%;
height:100%; /* Because IE6 is dumb. */

height: 80%;
}

#maincontent {
text-align:justify;
position:absolute;
padding:10px;
overflow: auto;
}

#maincontent a {
color:#000;
text-decoration:none;
border-bottom:1px dotted #000;
}

#header {
position:absolute;
top:0px;
right:0px;
/*
Unorthodox centering method to center absolutely-positioned elements in IE.
margin-left:auto; margin-right:auto; should really be used. Darn IE.
*/
left:50%;
margin-left:-363px;
width:726px;
height:155px;
color:#FFF;
font-size:25px;
}

.table {
display:table; /* Allow the centering to work */
margin:0 auto;
}

ul #horizontal-list {
list-style:none;
padding-top:20px;
display:inline;
}

#horizontal-list li.selected {
display:inline;
padding:2px 0 2px 6px;
background:#FFF url("images/tltab.gif") top left no-repeat;
}

#horizontal-list li.selected a.selected {
padding:2px 6px 2px 0;
text-decoration:none;
background:url("images/trtab.gif") top right no-repeat;
color:#000;
}

#horizontal-list li {
display:inline;
padding:2px 0 2px 6px;
background:#000;
}

#horizontal-list li a {
padding: 2px 6px 2px 0;
text-decoration:none;
background:#000;
color:#FFF;
}

#subnav {
position:absolute;
top:5px;
left:0px;
width:768px;
text-align:center;
padding-bottom:10px;
border-bottom:1px solid #000;
font-size:16px;
}

#subnav a {
text-decoration:none;
border-bottom:none;
color:#000;
padding:3px;
}

#subnav a.selected {
font-style:normal;
color:#FFF;
background:#000;
padding:3px;
}
</style>
</head>
<body>

<div id="header">
</div>

<div id="maincontainer">
<div class="top_corners"><div></div></div>
<div id="maincontent">
<div id="subnav"><a href="#">Unselected Subsection</a> ¦ <a class="selected" href="#">Selected Subsection</a></div>

<div style="height: 3000px; background-color: #ff00ff;">1</div>

</div>
</div>

</body>
</html>

tidalwav1

6:05 am on Apr 23, 2008 (gmt 0)

10+ Year Member



First of all, thanks for attempting to solve my issue.

I'm not really looking to emulate an iframe and have a separate scrollbar for only the content; I'd really rather just have the white container continue behind the content, to the absolute bottom of the page in all cases.

Is this possible?

JAB Creations

6:16 am on Apr 23, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Elements are transparent by default so in that case you could probably try reversing what I did by forcing the overflow to visible and simply set the div with the white background to have a certain height. So set the class white below to overflow: visible with a set height and the content class should continue to display below if you have enough content inside of it...

<div class="white">
<div class="content">
</div>
</div>

...I haven't tried something like this though frankly most things that are rectangular in nature can be achieved...it just comes down to browser compatibility. ;)

- John

SuzyUK

6:58 am on Apr 23, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



height a is trumping min-height, you need to feed the height value to IE6 and below only

e.g.
* html #maincontainer {height:100%;}

then take it out of the main rule leaving min-height to stretch when necessary

tidalwav1

7:33 am on Apr 23, 2008 (gmt 0)

10+ Year Member



Suzy,

This is the approach I tried before posting here. I also tried combining

min-height:100%;
and
height:auto;

but I still can't get things working properly.

SuzyUK

8:57 am on Apr 23, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ok I only looked at that bit of code but that's still an issue and needs separated..

the other issue is way too much absolute positioning, you don't actually need any, too complex to explain it all as I just ran through and removed it all which left IE with a problem but then I found another absolute.. hehe and on removal it's working fine for me

IE (5.x) doesn't need that method of centering, yes it doesn't honor margin 0 auto; but IE6 upwards does so get with the times hehe..

for IE5.x (though it does no harm for others) you simply set text-align: center on the body element, then reset the main containing divs back to left if required, that along with widths and margin: 0 auto; means you don't need AP at all, then #maincontent.. 

#maincontent {
text-align:justify;
position:absolute;
padding:10px;
}

it doesn't need that AP either! (that was one that threw me at the end ;))

you do have a problem with the list in the table above, but that's for anopther question if you want.. there's a gap between it and the main content (I would probably use floats for those boxes) but you can leave them inline and simply move the "topcorners" section up using a negative top margin, again no reason to use positioning, also the UL doesn't need to be inline, just its children, the ul is the container element. With temporary background color on the UL you can see the difference in height more clearly (this is because of the handling of padding of and inside an inline element, the li's and the <a>'s)

also you don't need the 

div.table
div at all, you can use the UL if you need to do something with the list. 
display: table
; does nothing to help centering - IE doesn't understand 
display: table
yet anyway, and being as there wasn't a width on it, there was nothing to center .. so I removed it from the HTML.. apart from that and using your HTML in the first post try this CSS, to see the things mentioned above.

* {margin:0px;padding:0px}
html, body {
height:100%;
font-family:"lucida sans", verdana, arial, helvetica, sans-serif;
background:#000;
text-align: center; /* IE 5.x center containers */
}

.top_corners {
background: #ff0; /*url("images/tr.gif") no-repeat top right;*/
/* margin-top: -2px; /* if you need to move the main stuff up to meet the list */
}

.top_corners div {
background: #ff0; /* url("images/tl.gif") no-repeat top left;*/
}

.top_corners div, .top_corners {
/*width: 100%;*/ /* not required are 100% by default */
height: 10px;
}

#maincontainer {
/* position:absolute; right:0px; left: 50%; margin-left:-384px; top:150px; */
background:#FFF;
text-align: left; /* reset aligment */
width: 768px;
margin: 0 auto;
min-height:100%;
}

* html #maincontainer {height:100%; /* Because IE6 is dumb. */}

#maincontent {
/*position:absolute;*/
text-align:justify;
padding:10px;
}

#maincontent a {
color:#000;
text-decoration:none;
border-bottom:1px dotted #000;
}

#header {
/* position:absolute; top:0px; right:0px; left:50%; margin-left:-363px; */
text-align: left; /* reset text-alignment */
margin: 0 auto;
width:726px;
height:155px;
color:#FFF;
font-size:25px;
}

/* Not required
.table { display:table; margin:0 auto; } */

#horizontal-list {
/* padding-top:20px; display:inline; */
list-style:none;
margin: 0; padding: 0;
background: #cfc; /* for visual only */
}

#horizontal-list li {
display:inline;
padding:2px 0 2px 6px;
background:#000;
}

#horizontal-list li.selected {
background:#FFF; /* url("images/tltab.gif") top left no-repeat;*/
}

#horizontal-list li.selected a.selected {
padding:2px 6px 2px 0;
text-decoration:none;
background:url("images/trtab.gif") top right no-repeat;
color:#000;
}

#horizontal-list li a {
padding: 2px 6px 2px 0;
text-decoration:none;
background:#000;
color:#FFF;
}

#subnav {
/* position:absolute; top:5px; left:0px; */
margin-top: 5px;
width:768px;
text-align:center;
padding-bottom:10px;
border-bottom:1px solid #000;
font-size:16px;
}

#subnav a {
text-decoration:none; border: 0; color:#000; padding:3px;
}

#subnav a.selected {
font-style:normal; color:#FFF; background:#000;
}

I've left everything you had in *I think* but put it in comments so you can see the changes, but basically once you remove all the restrictions and feed the height to IE6 and below this works just fine. stay loose and work with the flow.

-Suzy

tidalwav1

3:41 am on Apr 24, 2008 (gmt 0)

10+ Year Member



Suzy,

Your code and thoughts were extremely helpful, and seem to have done the trick.

Thank you very much for helping me fix things! :)

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 2:22 am May 22, 2026