[SOLVED] RE: floats

just thought Id add an image of the problem, as you can see I have the left box set as normal and the right image has float right set, is there any way of getting the bg colour to extend to the base of the image on the right.

Please read the stickies at the top of the forum, specifically the ones that ask you to actually post the code you're using.

You haven't cleared your floats. That's my diagnosis but without seeing the code, impossible to verify.

here is the code as requested :

HTML:



Home || What To Expect || Previous Work || Contact Me

||HOME||

Hello and welcome to SMUNKEY DESIGNS, texttexttexttext text text text text text text text text text text text text text text text text text.

Designed by Andrew Lyon (Smunkey Designs) best viewed at 800x600 ++

CSS that is in html:

div#wrapper {
width: 687px;
margin:auto;
position:relative;
background-color:#3b3b3b;
}

div#banner_top {
width: 687px;
height: 229px;
}

div#menu {
background-image: url("images/menu.jpg");
width: 687px;
height: 42px;
}

div#menu_items {
width:687px;
position:absolute;
top:236px;
text-align:center;
color:#000000;
}

div#margins{
margin-top:0px;
margin-left:10px;
margin-right:10px;
margin-bottom:6px;
}

#img{
float:right;
margin-bottom: 10px;
}

#home_1 {
float:left;
width:510px;
margin:0px;
margin-top:0px;
background: url("images/box_left.gif") repeat-y left top;
}

/*---------------------------generic box tags---------------------------*/
.top {
width:100%;
height:51px;
background:url("images/box_top_left.gif") no-repeat left top;
}

.top span {
display:block;
position:relative;
height:51px;
background:url("images/box_top_right.gif") no-repeat right top;
}

.header{
display:block;
position:relative;
height:51px;
text-align:center;
color:#FFFFFF;
top:27%;
font-size:1.2em;
font-weight:bold;
}

.center-content {
position:relative;
background-color:inherit;
overflow:auto;
background:url("images/box_right.gif") repeat-y right top;
padding:1px 13px 1px 13px;
margin:-1px 0 0 0;
height:100%;
}

.bottom {
height:26px;
background:url("images/box_bot_left.gif") no-repeat left bottom;
}

.bottom span {
display:block;
position:relative;
height:26px;
background:url("images/box_bot_right.gif") no-repeat right top;
}

.bg {
background-color: inherit;
}

CSS that is of particular interest is #img (its the float:right) and #home_1 (its the float:left), finally the bg color is set in the wrapper which is div#wrapper.

read up on clearing floats (as TPH mentioned above).
One method is to add overflow: hidden to the #wrapper

thanx wolf cry thats awesome, worked a treat.