Smudly Posted August 10, 2010 Share Posted August 10, 2010 Hi, I'm currently creating my html/css template for my site. I have the site split into 2 sections (Header, Content) My Content area is also split into 3 sections. This is because I have sliced the image that will be the background of my content. The first section shows the top of the rounded box for the content. The Second shows the whitespace (Area that will show content). The third shows the bottom of the rounded box. I need the middle content area to have a default height of about 500px. However, if the content requires over than 500px, it will automatically stretch to fit that page's needs. Below is a picture of my content area. It currently is not stretching to fit all the text. http://img530.imageshack.us/img530/1903/templatecontent.jpg Here is my HTML. And below that is my stylesheet. <html> <head> <title>Template</title> <link rel="stylesheet" type="text/css" href="styles/style.css" /> </head> <body bgcolor="#343331"> <!-- Header --> <div id="header"> <div id="headerleft"> </div> <div id="headermiddle"><p><a href="index.php"><img src="img/logo.png"></a> </p></div> <div id="headerright"> </div> </div> <!-- Content Top --> <div id="contenttop"> </div> <!-- Content Middle --> <div id="contentmiddle"> <div id="content"> Hello<br /> </div> </div> <!-- Content Bottom --> <div id="contentbottom"> </div> </body> </html> #header{ width: 912px; height: 78px; background:url(../img/bggreen_header.png) no-repeat; margin-left: auto; margin-right: auto; } #headerleft{ width: 249px; height: 78px; text-align: center; float: left; } #headermiddle{ width: 414px; height: 78px; text-align: center; float: left; } #headerright{ width: 249px; height: 78px; text-align: center; float: left; } body{ margin-top: 25px; } #contenttop{ width: 912px; height: 50px; background:url(../img/content_top_1.png) no-repeat; margin-left: auto; margin-right: auto; } #contentmiddle{ width: 912px; height: 500px; background:url(../img/content_middle.png); margin-left: auto; margin-right: auto; z-index: 10; } #contentbottom{ width: 912px; height: 30px; background:url(../img/content_bottom.png) no-repeat; margin-left: auto; margin-right: auto; } #content{ width: 850px; height: 100%; margin-left: auto; margin-right: auto; z-index: 20; } img{ border: none; } Thanks. Quote Link to comment Share on other sites More sharing options...
linus72982 Posted August 10, 2010 Share Posted August 10, 2010 Try changing the "height: 500px;" to "min-height: 500px;" in the contentmiddle section. You can't define a definite height and still have it stretch. Min-height should do what you want. Quote Link to comment Share on other sites More sharing options...
Smudly Posted August 10, 2010 Author Share Posted August 10, 2010 Darn, that didn't work Quote Link to comment Share on other sites More sharing options...
Smudly Posted August 10, 2010 Author Share Posted August 10, 2010 Your method worked, I just did something wrong. Thanks for the help! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.