Help with my layout coding :S

[Blazz]

Hey, I need a little bit of help with my layout. I'm no expert in divs.

Show Hide

http://img.habboupload.com/1222974078.jpg

In the spoiler, theres the layout. The background isnt expanding right down to the bottom of the content box, only the bottom div. Any help?

Heres the part of the HTML code that involves it:

Show Hide

<!-- Start main col -->

<div id="maincont">

<div id="content-header">&nbsp;</div>
<div id="content-body">

<div id="maincont2">

<div id="main_header"><span class="style2">Main Content</span></div>
<div id="main_body"><iframe src="home.htm" width="98%" id="content" marginwidth="1" marginheight="1" name="content" scrolling="no" border="0" frameborder="0" allowtransparency="yes""></iframe>
</div>
<div id="main_footer"></div>
</div>

<div id="box_header"><span class="style2">Content</span></div>
<div id="box_body"><div style="margin-left: 2px;"><div style="margin-right: 2px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vulputate mauris sit amet magna. Nulla facilisi. In hac habitasse platea dictumst. In imperdiet diam eu metus. Praesent eget orci sed lectus gravida eleifend.</div></div></div>
<div id="box_footer"></div>
<br>
<div id="box_header"><span class="style2">Content</span></div>
<div id="box_body"><div style="margin-left: 2px;"><div style="margin-right: 2px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vulputate mauris sit amet magna. Nulla facilisi. In hac habitasse platea dictumst. In imperdiet diam eu metus. Praesent eget orci sed lectus gravida eleifend.</div></div></div>
<div id="box_footer"></div>
<br>
<div id="box_header"><span class="style2">Content</span></div>
<div id="box_body"><div style="margin-left: 2px;"><div style="margin-right: 2px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vulputate mauris sit amet magna. Nulla facilisi. In hac habitasse platea dictumst. In imperdiet diam eu metus. Praesent eget orci sed lectus gravida eleifend.</div></div></div>
<div id="box_footer"></div>

</div>
<div id="content-footer">&nbsp;</div>

<!-- End end col -->

Css code:

Show Hide

#box_header {
background-image: url(images/box/box_header.gif);
width: 215px;
height: 20px;
padding-top: 3px;
padding-left: 5px;
margin-left: 10px;
}
#box_body {
background-image: url(images/box/box_body.gif);
width: 220px;
background-repeat: repeat-y;
margin-left: 10px;
}
#box_footer {
background-image: url(images/box/box_footer.gif);
width: 220px;
height: 4px;
background-repeat: no-repeat;
margin-left: 10px;
}
#main_header {
background-image: url(images/main/main_header.gif);
width: 545px;
height: 22px;
padding-top: 3px;
padding-left: 5px;
}
#main_body {
    background-image: url(images/main/main_body.gif);
    width: 550px;
    background-repeat: repeat-y;
    text-align: center;
}
#main_footer {
background-image: url(images/main/main_footer.gif);
width: 550px;
height: 10px;
background-repeat: no-repeat;
}
#maincont2 {
width: 550px;
float: right;
margin-right: 10px;
}
#maincont {
width: 834px;
float: left;
height: auto;
}
#content-header {
background-image: url(images/content-header.gif);
width: 834px;
height: 14;
background-repeat: no-repeat;
}
#content-body {
    background-image: url(images/content-body.gif);
    width: 834px;
    background-repeat: repeat-y;
}
#content-footer {
    background-image: url(images/content-footer.gif);
    width: 834px;
    height: 14;
    background-repeat: no-repeat;
    clear: both;
}

[Excellent2]

To the expanding div add clear: both; and overflow: hidden;

[Blazz]

Ahh, cheers, I learnt where I went wrong. Thanks very much!

[Anticimex]

You should always listen to Lucas.
He's a great coder.