gh05

Ok this is the link to the site containing what i have so far: http://www.yourweddingplan.co.uk/ As you can see, the main grey panel has not resized around the yellow coloured panels contained within it. Also, the yellow panels overlap each other. What i want is a basic template so that i can easily update the site with new articles and images without all of the positioning going wrong. The css code is as below....apologies for it being so long and messy, it is my first attempt at creating a site with css. ------------------------------------- body{padding:7px;} /*Website Panel - inside border*/ #bodyPagePanel{width:auto; background:#fff; border-style:solid; border-color:#E8E8E8; padding:10px 10px 30px 10px; position:relative; top:0%; left:0%;} /*Site Header Panel*/ #headerPanel{width:auto; background:#fff; font-weight:bold; padding:10px 20px 20px 20px; position:relative; top:1%; left:0%;} #headerPanel h1{font:35px/35px Arial; font-weight:bold;} #headerPanel h1 span{color:#046598;} /*The Menu Bar for top of page */ #topMenuHorizontal{width:auto; height:20px; position:relative; top:0%; left:0%;} #topMenuHorizontal ul{width:auto; height:0px; float:left;} #topMenuHorizontal ul li{width:130px; height:15px; border-top:1px solid #E5E5E5; border-bottom:1px solid #E5E5E5; border-left:1px solid #E5E5E5; float:left;} #topMenuHorizontal ul li.end{width:130px; height:15px; border-top:1px solid #E5E5E5; border-bottom:1px solid #E5E5E5; border-right:1px solid #E5E5E5; float:left;} #topMenuHorizontal ul li a {width:130px; height:15px; display:block; background:#99CCFF ; color:4A4A4A; font:12px/18px Arial; font-weight:bold; text-align:center; text-transform:uppercase;} #topMenuHorizontal ul li a:hover{background:#fff; color:#0574AF;} #topMenuHorizontal ul li.home{background:#99CCFF ; color:#0574AF; font:12px/18px Arial; font-weight:bold; text-align:center; text-transform:uppercase;} /*Main Panel of the page */ #bodyMainPanel{width:auto; background:#E8E8E8; padding:20px 20px 20px 20px; position:relative; top:4%; left:0%;} /*Top Content Panel*/ #topContentPanel{width:auto; background-color:#fff; padding: 0px 0px 0px 0px; position:relative; top:0%; left:0%} /*Site Intro Panel*/ #bodyIntroPanel{width:475px; border:1px solid #DADADA; background:#FEFBDD; color:#1A1A1A; padding:10px 10px 10px 10px; text-align:justify; position:relative; top:0%; left:0%;} #bodyIntroPanel h2{width:400px; height:30px; font:25px/25px Arial;} #bodyIntroPanel h2 span{color:#046598;} #bodyIntroPanel p{padding:8Px 0 0; font:12px/16px Arial;} #bodyIntroPanel p span{background:##FEFBDD; color:#046598; font-weight:bold;} /*Right Panel containing Recent Articles */ #bodyRightPanel{width:400px; border:1px solid #DADADA; background:#FEFBDD; font: 12px/16px Arial; font-weight:bold; color:#FF33CC; padding:10px 10px 10px 10px; position:absolute; left:507px; top:20px;} #bodyRightPanel h3{width:330px; height:35px; display:block; font:Arial; border:1px solid #DADADA; background:#FEFBDD; color:#00111A; font:24px/34px Times New Roman; margin:6px 8Px 16px; padding:5px 5px 5px 5px;} #bodyRightPanel h3 span{background:#FEFBDD; color:#046598;} #bodyRightPanel ul{width:270px; float:right; margin:0 0 17px 29px;} #bodyRightPanel ul li{ width:270px; height:18px;} #bodyRightPanel ul li a{width:270px; height:18px; display:block; 0 6px no-repeat #fff; color:#FF33CC; padding:0 0 0 20px; text-decoration:none;} #bodyRightPanel ul li a:hover{background:url(images/button-hover.gif) 0 6px no-repeat #fff; color:#797878;} #bodyRightPanel p{padding:0px 29px 0px 29px;} /*#bodyRightPanel p.boldtext{padding:10px 29px 0px; font-size:14px; background:#F3F3F3; color:#1A1A1A; font-weight:bold;}*/ /*Bottom Panel*/ #bottomPanel {width:908px; border:1px solid #DADADA; background:#FEFBDD; font: 12px Arial; font-weight:bold; color:#1A1A1A; padding:10px 10px 10px 10px; position:relative; left:0px; top:10px;} /*Article Panel*/ #articlePanel {width:auto; background:#fff; padding:20px 20px 20px 20px; position:relative; top:5% left:5%; font:12px Arial; color:#6600CC; text-align:justify;}

What's the best way to position panels in CSS? I'm getting frustrated trying to create a site which has one main panel containing everything and a number of other panels within the main one which will contain text and images. The problem i'm having is that the main panel is not resizing when more text and images are put into the smaller panels. I want to design it this way so that the site will always be easy to update. When i use position 'relative' the panels move horizontally across the screen in relation to each other when i dont want them to and if i use 'absolute' then i have to adjust the positions each time and the main panel won't resize. Using 'float' also causes the main panel not to resize! There has to be an easier way than this! I read something about it and saw that there is apparently a bug in CSS? Any help much appreciated. Thanks!