Problem whit divs, overlapping...

Hey,

I'm trying to let the divs enlarge automaticly if i add more content.. So i wan't the rounded corners at the bottom to go automaticly down if i add more in the white and grey div but it doesn't work...

Css:

/* CSS Document */
body
{
background: #2449a0 url(afbeeldingen/Background.png) repeat-x;
margin:0 auto;
padding:0;
}
.Page
{
width: 812px;
height: 963px;
margin:0 auto;
}
.menu
{
width: 812px;
height: 36px;
margin: 0 auto;
}
#Banner
{
width: 812px;
height: 151px;
margin: 0 auto;
}
#Banner img
{
margin-left: 5px;
margin-top: 25px;
}
#Top_img
{
width: 806px;
height: 247px;
margin: 0 auto;
}
#Top_img img
{
width: 806px;
height: 225px;
margin-top: 22px;
}
#Content
{
width: 806px;
height: 475px;
position: static;
background: #AFADAD url(afbeeldingen/Grey_bg.png) repeat-x;
margin: 0 auto;
}
#Content div.White1
{
width: 528px;
height: 476px;
background: url(afbeeldingen/Bg_light.png) repeat;
margin-top: 0px;
margin-left: 8px;
font-family: Arial, Helvetica, sans-serif;
color: #3a2c2c;
float: left;
font-size: 12px;
}
#Content div.White2
{
width: 463px;
height: 382px;
margin-left: 25px;
font-size: 12px;
}
.blue
{
font-family: Arial, Helvetica, sans-serif;
color: #4c71be;
font-size: 13px;
}
#Content div.Dark
{
width: 253px;
height: 476px;
background: url(afbeeldingen/Dark_bg.png) repeat-y;
float: left;
margin-left: 7px;
}
#Content div.Dark2
{
width: 225px;
height: 324px;
margin-top: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin-left: 13px;
font-size: 12px;
}
.Date
{
font-size: 12px;
font-family: Tahoma;
color: #efe78c;
}
#Rounded
{
width: 806px;
height: 13px;
position: static;
background: url(afbeeldingen/Small_grey.png) repeat;
margin: 0 auto;
}
#Rounded div.Rounded1
{
width: 528px;
height: 9px;
float: left;
margin-left: 8px;
margin-top: 0px;
}
#Rounded div.Rounded2
{
width: 253px;
height: 9px;
float: left;
margin-left: 7px;
margin-top: 0px;
}
#Rounded div.Rounded3
{
width: 805px;
height: 8px;
float: left;
margin-left: 0px;
margin-top: 0px;
}

Code (markup):

page:

www.lostworld.be/coach

Pls any1 has a tutorial for this or help?

thx, Jelle

 

You could try "CSS-rounded borders" in plaats van images. Divs automagically enlarge to fit content if height and width are not set (="auto") so it might take a lot off your mind.

http://battletech.hopto.org/html_tutorials/rounded_css_borders/

He uses <b> tags and I've been using them on one page so far-- beautiful. However watch out for some of the IE stuff he adds in-- you need to hide them behind a star hack or something. I used his top example and only on the top (not all four corners) and got this:

/*stompe hoeken, Jason Knight*/
.rond { 
  position: relative;
} 
* html .rond {height: 1%;}

	.boven, .boven b { 
  	  display: block; 
  	  font: normal 1px/1px sans-serif;/*IE*/ 
  	  position: relative;  
	} 
	.rond .boven { 
  	  margin: 0 5px; 
  	  height: 4px; 
	} 
	.rond .boven, .rond .boven b {
  	  padding-top: 1px; 
  	  color: #fff; 
  	  background-color: #0d1b35;
	} 
	.rond .boven b { 
  	  margin: 0 -2px; 
  	  height: 3px; 
	}
	.rond .boven b b { 
  	  margin: 0 -1px; 
  	  height: 2px; 
	} 
	.rond .boven b b b { 
  	  height:1px; 
	} 
/*eind hoeken*/

Code (markup):

Works so far : )

 

Thx m8

problem solved...