CSS skin attempt--http://avw.isilm.com

The above link is to a site im working on for a client using no tables.  I am just trying to get things positioned correctly (so none of the content image links go anywhere).

Originally, I had a div surrounding both the banner kitchen img pane and the welcome home pane.  Photopane floated left, Welcome pane floated right.  With a background color of white with a gray border surrounding them both.

The darned thing wouldnt grow with the two panes it was in.  If I remember correctly, a similar topic was covered where when the footer pane was "clear:both" the blue bg came in fine, but I cant get it to work. 

I like the way it looks now much better then i had before, but am curious as to why the heck it wouldnt show (the only way i could get it to show was by defining a height for the div). 

I would greatly appreciate it if someone could help me understand why it wouldnt grow.

Thank you,
Charlie

I'd need to look at your skin to understand this ...

You can see the skin at the link above. I can get you the .html and .css code tomm morning. Just copy n paste it into the body of the message? I apologize I dont know the standard forum procedure here.

Probably best to NOT paste the code, as it will have tags that mess up the post.

Hello,

If you wish to post the HTML code, do a find and replace on the < and > tags and change them for [ and ] and then post it into the forum.

Yes you are correct regarding the clear:both method - but it's hard to tell why this didn't work for you without playing with the code. - Sometimes a height or width does need specifying if you are getting problems. - ie the peekaboo bug, you can specify a height / width of 100% to get around the problem.

I troubleshoot these problems using the web developers toolbar and add a border to all of the divs - I can then easily view what is happening and experiment with different css code to try and solve the problem. - With problems like this I just strip everything out except the problem area, this makes it much easier to troubleshoot and see if other elements in the skin are causing the problem.

Thanks,

[div id="wrapper"]
[div id="logo"][LOGO][/div]
[div id="home_banner"]
[div id="banner_left"]
[div id="picture" runat="server"][/div]
[/div]
[div id="banner_right"]
[div id="welcome_home" runat="server"][/div]
[/div]
[/div]
[div id="navigation_row"]
[Snapsis:NavMenu id="nav" Level="0-4" CacheTabs="False" NavType="Hover" ExcludeTabs="Admin,Host" runat="server" /]
[div id="loginlinks"][USER] [LOGIN][/div]
[/div]
[div id="main_content"]
[div id="col1"]
[div id="leftpane" runat="server"][/div]
[/div]
[div id="col2"]
[div id="middlepane" runat="server"][/div]
[/div]
[/div]
[div id="col3"]
[div id="rightpane" runat="server"][/div]
[/div]
[div id="footer"][COPYRIGHT] [TERMS] [PRIVACY][/div]
[div id="admin_dd"][!-- absolute position this div to top right--]
[Snapsis:NavMenu id="AdminHostList" Level="0" Type="SelectList" IncludeTabs="Admin,Host" runat="server" /]
[/div]
[div id="controlpanel" runat="server"][/div]
[/div]



/*=============== CSS =================*/

body{
margin:0;
padding:0;
text-align:center;
line-height: 1.1;
font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000;
background-color:#fff;
}

#wrapper{
width:965px;
text-align:left;
padding:0;
margin:0 auto;
background:url(images/wrapper_bg.jpg) #fff no-repeat top right;
}


#logo{float:left;height:125px;padding:10px 0 10px 0;}

#home_banner{
width:965px;
height:215px;
clear:left;
/*border:1px solid #ccc;*/
padding:0;
background:transparent;

}

#banner_left{float:left; height:215px; border:1px solid #ccc; }
#dnn_picture{padding:2px; background-color: #fff;}
#dnn_picture img{padding:0; margin:0;}

#banner_right{float:right; width:305px; height:215px; border:1px solid #ccc;
background-color:#fff;}
#dnn_welcome_home{
padding:0px 10px 10px 10px;
background:url(images/welcome_bg4_2.jpg) #fff no-repeat 2px -5px;
/*background:url(images/welcome_bg4_1.jpg) #fff no-repeat -320px -135px;*/
}
#dnn_welcome_home p{padding:3px 0 0 0; margin:3px 0 0 0; font:12px arial; line-height:16px;}
#navigation_row{
clear:both;
height:40px;
border:1px solid #ccc;