Member Avatar for Smudly

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.

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">&nbsp;</div>
	<div id="headermiddle"><p><a href="index.php"><img src="img/logo.png"></a>&nbsp;</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.

  • 3 Contributors
  • 2 Replies
  • 118 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

The behavior seen in this thread is caused by fixing the middle slice to a rigid height. That locks the visual box and prevents it from growing with content (especially when the inner element uses a percent height). As hinted, avoid fixed heights for flexible content; and as pointed out, use a vertically tiled middle image so the background can extend. A practical fix is to give the middle wrapper a min-height (the 500px default) and let the inner content determine the final height.

Try a minimal CSS pattern like this to keep the middle slice flexible while preserving the tiled background:

/* middle slice uses a small tile that repeats vertically */
.content-mid {
  min-height: 500px;
  background: url("../img/content_mid_tile.png") repeat-y center top;
}

/* inner content flows naturally; prefer padding over fixed height */
.content-inner {
  padding: 24px;
}

Troubleshooting notes:

  • Remove any height: 100% on the inner element; percentage heights require a fixed parent height. See MDN on percentage heights for details: height — percentage values.
  • If the container still looks collapsed, check for floats or absolutely positioned children—use a clearfix or overflow:auto on the wrapper to contain floats (clearfix reference: CSS-Tricks clearfix).
  • Confirm a standards-mode DOCTYPE so layout behaves predictably (see MDN on DOCTYPE).

For modern layouts, consider using CSS border-radius and background colors (or gradients) instead of image slices; this removes slicing complexity and is widely supported (border-radius). This keeps the layout simpler and makes the middle region naturally expandable while preserving the rounded visual.

Recommended Answers

All 2 Replies

Member Avatar for JRM

use percentages instead of absolutes like px whenever possible.
width is usually more of a problem than height, anyway.
Is there some reason that you need to set a min height for content?

Member Avatar for almostbob

the top and bottom images need to be the actual image you need, to fit in the curves etc, the center image need only be a slice 1 pixel thick through the middle of the image, repeat-y
apologise for inline styles they belong in the stylesheet, included here for expalanation

<body><div class='header' style='whatever'>whatever,</div>
<div class='contenttop' style='height:backgroundtopheight; background:url(backgroundtop.jpg) norepeat; width:100%;'>whatever</div>
<div class='content' style='background:url(backgroundslice.jpg) repeat-y; width:100%;'>whatever</div>
<div class='contentbtm' style='height:backgroundbtmheight; background:url(backgroundbtm.jpg) norepeat; width:100%;'>whatever</div>

its late and this may not be the most logical way to present this info

Edited by almostbob because: n/a
commented: n/a +1
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.