CSS Help: DIV Stretch to fit Contents

[Meh 626]

Hi,

I have searched and searched regarding this topic and tried many things with no luck. I am out of ideas. I need your help MacTalk.

I am creating a site, I have a <div> with two <span>'s in it, one containing the main content. I would like the <div> to stretch to fit all of the content, so far I have not been able to get this to work.

Here is a snippet of the HTML code:

<div id="contenttop" align="center"></div>
</center>
<center>
<div id="contentbody" align="center">
<br />
<span id="titlefont">Test</span>
<br /><br /><br />
<!-- Editable Content-->
<span id="contentfont"><!--#include virtual="include/About.txt" --></span>
<!-- End Editable Content-->
<br /><br />
</div>
</center>
<center>
<div id="contentbottombar" align="center"></div>
</center>

You can view the result here: Meh626 DIV Stretching Help!

Here is a snippet of the CSS code:

#contentbody {
	width: 700px;
	z-index: 2;
	margin-left: auto;
	margin-right: auto;
	background-color: #CCCCCC;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999999;
	border-left-color: #999999;
}
#contenttop {
	width: 702px;
	height: 11px;
	background-image: url(../images/contenttop.png);
	background-repeat: repeat-x;
	background-position: top;
	z-index: 3;
	margin-left: auto;
	margin-right: auto;
}
#contentbottombar {
	width: 700px;
	height: 12px;
	background-image: url(../themes/balloons/cloudbar.png);
	background-repeat: repeat-x;
	background-position: bottom;
	z-index: 4;
	border: 1px solid #999999;
	margin-left: auto;
	margin-right: auto;
	clear: both;
}
#contentfont {
	font-family: Arial;
	font-size: small;
	color: #444444;
	text-align: left;
	margin-left: 20px;
	margin-right: 20px;
	width: 660px;
	height:auto;
	float: left;
	z-index: 2;
}
#titlefont {
	font-family: Arial;
	font-size: x-large;
	color: #B40138;
	text-align: left;
	float: left;
	margin-left: 20px;
	text-shadow: rgba(0,0,0,0.5)1px 1px 0px;
	font-weight: bold;
	line-height: 200%;
	width: 700px;
}

You can view the full CSS here: http://meh626.com/help/css/sitestylestest.css

Any help would be greatly appreciated.

Thank you,

[iMac600]

I'm not sure this is the best fix, but it should accomplish what you're after anyway.

In the HTML file, change this portion:

</span>
<!-- End Editable Content-->
<br /><br />
</div>

To:

</span>
<!-- End Editable Content-->
<br /><br />
<div style="clear:both;"></div>
</div>

Basically adding <div style="clear:both;"></div> below the two <br /> tags.

Here's the same page with that change applied (hosted off my temp server):

Meh626 DIV Stretching Help!

[Meh 626]

Originally Posted by iMac600

I'm not sure this is the best fix, but it should accomplish what you're after anyway.

In the HTML file, change this portion:

</span>
<!-- End Editable Content-->
<br /><br />
</div>

To:

</span>
<!-- End Editable Content-->
<br /><br />
<div style="clear:both;"></div>
</div>

Basically adding <div style="clear:both;"></div> below the two <br /> tags.

Awesome, it worked. Thanks so much! But another issue has turned up, when you shrink the window so the balloons go behind the content area, the text drops. Any ideas?

[saphylia]

Originally Posted by Meh 626

<snip> ..when you shrink the window so the balloons go behind the content area, the text drops. Any ideas?

I can't replicate that in any way, for me the text is always lower than it should be if it was indeed meant to sit at the top of the window.

At any rate, those balloons scare me, you might want to fix the magic wand job on the sides of them.

[marc]

Worth looking at if you want to create bulletproof, complex CSS layouts quickly: Blueprint: A CSS Framework | Spend your time innovating, not replicating

[iMac600]

Originally Posted by Meh 626

Awesome, it worked. Thanks so much! But another issue has turned up, when you shrink the window so the balloons go behind the content area, the text drops. Any ideas?

In css/sitestylesheet.css, Line 343 (within #themeright), replace:

position: relative;

With:

position:absolute; right:0;

That should correct the issue. I've updated the test version with these changes so you can see for yourself. Meh626 DIV Stretching Help!

[saphylia]

Originally Posted by marc

Worth looking at if you want to create bulletproof, complex CSS layouts quickly: Blueprint: A CSS Framework | Spend your time innovating, not replicating

Personally I prefer, and use the 960 system, see 960 Grid System.

[Meh 626]

Originally Posted by iMac600

In css/sitestylesheet.css, Line 343 (within #themeright), replace:

position: relative;

With:

position:absolute; right:0;

That should correct the issue. I've updated the test version with these changes so you can see for yourself. Meh626 DIV Stretching Help!

Thanks mate! Works great.

Originally Posted by saphylia

At any rate, those balloons scare me, you might want to fix the magic wand job on the sides of them.

Fixed the balloons, thanks for the tip. I have taken down the test site since the issue has been solved.

Thanks all.

[marc]

Originally Posted by saphylia

Personally I prefer, and use the 960 system, see 960 Grid System.

Both good! They achieve a similar goal and stop you from have to fudge around with floats and clears, when you actually want to be thinking about the design.

(FWIW, I only use the grid file in Blueprint.)

Meh 626: Sorry for the mini hijack, but if you were using 960 or Blueprint, you could have knocked the CSS and HTML for that page up in 5 mins and be confident it'd work in all browsers.