5 replies [Last post]
andylyon87
Offline
newbie
Last seen: 15 years 10 weeks ago
Joined: 2007-03-18
Posts: 6
Points: 0

Hey guys n gals

First post so lets see how good this forum is.

I am designing a site where the main div has a bg colour, this is supposed to extend as far as the content.

Now I am floating 2 elements inside this div so as to line them nicely next to each other, and there is no bg colour. I have heard of using an empty div to drag the bg colour down somehow. Does anyone know any way of helping?

Andylyon87

andylyon87
Offline
newbie
Last seen: 15 years 10 weeks ago
Joined: 2007-03-18
Posts: 6
Points: 0

just thought Id add an image

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.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Please read the stickies at

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.

Verschwindende wrote:
  • CSS doesn't make pies

andylyon87
Offline
newbie
Last seen: 15 years 10 weeks ago
Joined: 2007-03-18
Posts: 6
Points: 0

here is the code as

here is the code as requested :

HTML:








||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.










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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

read up on clearing floats

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

andylyon87
Offline
newbie
Last seen: 15 years 10 weeks ago
Joined: 2007-03-18
Posts: 6
Points: 0

thanx wolf cry thats

thanx wolf cry thats awesome, worked a treat.