2 divs side by side, parent div with auto expanding background

HTML & CSS
1

Hi,

I have had a search for a solution to this problem but no luck.

I have the following HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div id="wrapper">
	<div id="header"></div>
	<div id="title"></div>
  	<div id="midbg"></div>
    <div id="contenttop"></div>
    <div id="contentbg">
    	<div id="leftcontent">
        	<div class="contentbox">
            	<div class="contentbox_top"></div>
                <div class="contentbox_main">a</div>
                <div class="contentbox_bot"></div>
            </div>
            <div class="contentbox">
            	<div class="contentbox_top"></div>
                <div class="contentbox_main">a</div>
                <div class="contentbox_bot"></div>
            </div>
            <div class="contentbox">
            	<div class="contentbox_top"></div>
                <div class="contentbox_main">a</div>
                <div class="contentbox_bot"></div>
            </div>
        </div>
        <div id="rightcontent">b</div>
    </div>
    <div id="contentbot"></div>
</div>
</body>
</html>

and this CSS


@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
.clearfix:after {content:"."; display:block; height:0;
                 clear:both; visibility:hidden; }
.clearfix       {display:inline-block;}
/* Hide from IE Mac */
.clearfix       {display:block;}
/* End hide from IE Mac */

body{
	background: #012c43;
	height:100%; 
}
#wrapper{
  width: 922px ;
  margin: 0 auto;
}

#header{
	background: url(images/header.jpg) no-repeat;
	width: 922px;
	height: 249px;
}
#title{
	background: url(images/title.jpg) no-repeat;
	width: 922px;
	height: 76px;
}
#midbg{
	background: url(images/midbg.jpg) no-repeat;
	width: 922px;
	height: 122px;
}
#contenttop{
	background: url(images/contenttop.jpg) no-repeat;
	width: 922px;
	height: 11px;
}
#contentbg{
	background: url(images/contentbg.jpg) repeat-y;
	width: 922px;
}
#contentbot{
	background: url(images/contentbot.jpg) no-repeat;
	width: 922px;
	height: 15px;
}
#leftcontent{
	padding-left: 10px;
	width: 675px;
	position: relative;
}
#rightcontent{
	left: 685px;
	padding-left: 10px;
	width: 224px;
	position: relative;
}
.contentbox{
	width: 675px;
	background: #dadada;
	margin-bottom: 10px;
}
.contentbox_top{
	height: 9px;
	background: url(images/contentbox_top.jpg) no-repeat;
}
.contentbox_bot{
	height: 9px;
	background: url(images/contentbox_bot.jpg) no-repeat;
}
.contentbox_main{
	height: 200px;
}

What I want is for the 2 divs, leftcontent and right content, to display side by side and the background image in contentbg to automatically repeat down past whatever is in the leftcontent and rightcontent.

At the moment everything is ok except the leftcontent and right content. The rightcontent div is appearing below the leftcontent div. If I put a ‘float’ in place thhis positions the leftcontent and rightcontent properly but it messes up the repeating backgroundd of contentbg. I have been messing aroun with height and min-height for ages and can’t get it to work.

Any ideas?

Thanks

2

That worked perfectly, cheers!

Simple :slight_smile:

3

The best approach is to float the columns and then add overflow: hidden to #contentbg

E.g.

#contentbg{
	background: url(images/contentbg.jpg) repeat-y;
	width: 922px;
        [COLOR="Red"]overflow: hidden;[/COLOR]
}

The problem is that #contentbg is not wrapping around its floated contents, and overflow: hidden forces it to do so. There are other methods (like “clearfix”), but this is the simplest and works in most situations (except where you want content visibly hanging out of the container.)