Minimum height for div box

[marynorn]

I've been asked to create a site with a content box that has rouded corners and a dropped shadow. I hate using layout images, but I've done it.

The content box has two further div boxes: sidebar and mainContent. The sidebar floats right and contains half a dozen images (adding up to approximately 500 pixels high), and the mainContent box holds anything and everything, and can be as little as one line of text.

The problem is that the layout acts like the sidebar isn't there. If the mainContent box is only one line, the bottom of the layout stops there, and the sidebar sits on top of everything.

I'm sure I'm missing something really obvious and stupid, but I'm self taught so I tend to fall into huge holes in my knowledge that I didn't know were there.

body {
	background:#90a2b7;
	text-align:center;
	margin:0;
	padding:0;
	font:normal 0.8em/1.2em verdana,arial,sans-serif;
	color:#666;
	}

a {
	color:#ffffff;
	}
a:hover {
	color:#ffffff;
	}	
#logo {
	display:none;
	}
#wrapper1 {
	width:90%;
	margin:0px auto; 
	background:#fff url(Design%20elements/left.png) repeat-y left top;
	} 
#header {
	background:#002a5c;
	padding:10px 55px;
	margin:0;
	text-align:left;
	color:#000;
	border-bottom:#c0ffc0;
	text-decoration:none;
	color:#000000;
	}

#navbar {
	background:#002a5c;
	padding:5px 60px;
	text-align:left;
	}
#header h1 {
	font-size:200%;
	}
#sidebar1 {
	float: right; 
	width: 250px; 
	background: #FFFFFF; 
	text-align:right;
	}
#mainContent { 
	margin: 0 10px 0 10px;
	text-align:left;
	}
#footer {
	position:relative;
	top:1px;
	background:#90a2b7;
	width:90%;
	clear:both;
	margin:0;
	padding:1%;
	text-align:center;
	color:#CCC;
	}

.style3 {color: #FF0000}

.top { 
width:100%; 
height:65px; 
background:url(Design%20elements/cnrtop.png) no-repeat left top; 
} 
.top span { 
display:block; 
position:relative; 
height:65px; 
background:url(Design%20elements/cnr02.png) no-repeat right top; 
} 
.center-content { 
position:relative; 
background:url(Design%20elements/right.png) repeat-y right top; 
padding:1px 20px 1px 25px; 
margin:-1px 0 -50px 0; 
} 
.bottom { 
height:65px; 
background:url(Design%20elements/cnrbottom.png) no-repeat left bottom; 
} 
.bottom span { 
display:block; 
position:relative; 
height:65px; 
background:url(Design%20elements/cnr03.png) no-repeat right top; 
}

Help?

[brentnicholas]

I can't address the techincal aspect, but have you looked at CSS Play? He's got non-images based CSS rounded boxes... I use them all over our site.

http://www.cssplay.co.uk/boxes/