CSS - Make 2 Divs The Same Height

I have a 3 column layout. Each column may contain one or two articles with a border at the bottom of each article. The There are two borders between the three columns.

I'm trying to use floated divs as containers for each of the columns, with a left-hand border in the center and right columns.

You can see a non-css example at: http://www.sananselmopreschool.org/pilot/

Well, no matter what I do, I haven't been able to get the column containers to extend to the bottom of the page in IE. If I set them to height:100%, they seem to shoot out to 150% or so.
body {
height:100%;
padding:0;
margin:0;
background-color:#ECF6DD;
font-family: Tahoma;
font-size: 11px;
color: #707070;
text-align:center;
border: 1px solid purple;
}

.body_container {
position: relative;
height:100%;
width:100%;
left: 0px;
border: 1px groove darkred;
}
.body_position_center {
height:100%;
position:relative;
width:780px;
margin-right: auto;
margin-left: auto;
border-collapse:collapse;
border: 1px solid #999 ;
}

.header {
padding:0;
margin:0;
position:relative;
width:766px;
height:195px;
}

.leftblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}

.centerblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}
.rightblock
{
position: relative;
height:100%;
border-left:3px dotted #228B22;
float:left;
width:250px;
}
.blockcontents
{
padding-top:14px;
padding-bottom:14px;
border-bottom : 3px dotted #228B22;
text-align:left;
}

Any suggestions would be appreciated. I haven't used much javascript, so unless I can see an example, it might be tough to work out a javascript solution.

I was experimenting this weekend with some CSS 'page-sculpting', using small divs to make shapes, etc.

I used FireFox as my testbed and of course everything went smoothly. I switched over to IE6 and saw that every div had a minimum height-it looked like 1em.

I specified height and width on all <div>. Some used borders, some did not. An example would be:
PHP Code:
<div style="height:2px; width:3px; background:green" ></div> 





Has anyone else come across this or know of a fix? I haven't tried <span> or other tags (I will...just thought of that), tho I suspect they'll behave the same.

Any help appreciated.

NotGoddess

I had my css working fine and then I decided to change the layout and I almost have the new style sheet finished.

However, I am trying to divide my header field into 2 columns (each 50% of the width), the left most column will have my banner and the right most column will be split in half (each half being 50% of total height), with 2 rows, one for a search field and the other for my main site navigation.

However, the 2 rows are not taking up the 50% of the height that I would like for them to take up. Any ideas as to why? I tried defining min and max height, but that didn't work...

Here's my css:
Code:

/* CSS Document */
h1 {
	font-family: Geneva, Arial, sans-serif;
	font-size: 20px;
	color:#000000;
}

h2{
	font-family: Geneva, Arial, sans-serif;
	font-size: 16px;
	color:#000000;
}

h4{
	font-family: Geneva, Arial, sans-serif;
	font-size: 12px;
	color:#000000;
}

/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
	width: 1024px;
	min-height: 748px;
	margin: 0 auto;
	background: #ffffff;
	overflow: hidden; /* contain inner floats */
	position: relative; /* establish the containing block */
}

#accounttypeselector { /* select personal or business to affect page display */
	height: 25px;
	background: #0000FF;
}

#servicesbar { /* container for user services */
	height: 30px; /* 30px should be adequate height */
	width: 100%;
}

#servicesbar-services { /* container for user services once logged in */
	float: left; /* push this to left side */
	width: 75%; /* want it to be 75% of the servicesbar width */
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	background: #ff00ff;
}

#servicesbar-login { /* for user login and logout - contained inside servicesbar */
	float: left; /* should push this just beside services */
	width: 25%;
	height: 100%; /* since servicesbar container height is 30px should be 100% of this */
	background: #8B2323;	
}

#header { /*header for the site - will contain logo, search, and main navigation */
	float: left;
	width: 1024px;
	height: 100px;	
}

#header-logo { /* will include site banner/logo - will be located on left side */
	background: #ff0000;
	width: 50%;
	float: left;
}

#header-rightcol { /* column for search and main nav */
	width: 50%;
	float: left;
}

#header-rightcol-search {
	min-height: 50%;
	max-height: 50%;
	background: #7FFFD4;
}

#header-rightcol-navmain { /* navbar that will be located below header */
	min-height: 50%;
	max-height:-50%;
	background: #21ee00;
}

#bodywrapper { /* wrapper for main content - will have 3 columns here */
	width: 1024px;
	height: 100%;
	padding-top: 10;
}

#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
	width: 15%;
	background: #8B8378;
	float: left;
}

#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
	width: 60%;
	background: #66CDAA;
	float: left;
}

#bodywrapper-news { /* news column to be located in right column of bodywrapper */
	width: 25%;
	background: #8A2BE2;
	float: left;
}

#footer { /* footer to be located at bottom of wrapper */
	margin: 0 auto;
	position: relative;
	width: 1014px; /* will be 1024 with padding */
	height: 20px;
	padding-right: 10px;
}

and here's my basic html
Code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="test2.css" />
</head>
<body>	
	<div id= "wrapper" >
	
		<div id= "accounttypeselector" > Lorem ipsum dolor sit amet </div>
		
		<div id= "servicesbar" >
			<div id= "servicesbar-services" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
			<div id= "servicesbar-login" > Lorem ipsum dolor sit amet</div>
		</div>
		
		<div id= "header" >
			<div id= "header-logo" >
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
			adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
			penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
			libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
			cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
			pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
			in dui. In eget elit. Praesent eu lorem.</div>
			
			<div id= "header-rightcol" >
				<div id= "header-rightcol-search" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
				<div id= "header-rightcol-navmain" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
			</div>
			
		</div>
		
		<div id= "bodywrapper" >
		
			<div id= "bodywrapper-navleft" >
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.
			</div>
			<div id= "bodywrapper-main" >
				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.			
			</div>
			<div id= "bodywrapper-news" >
				   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
					adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
					penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
					libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
					cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
					pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
					in dui. In eget elit. Praesent eu lorem.			
			</div>
		
		</div>
	
	</div>
	
	<div id= "footer" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
</body>
</html>

Thanks in advance and any suggestions would be greatly appreciated.

Hello, not sure I know how to explain this. I have a page that I want to divide in two parts. To do so I am using floats. The problem is that the content in one div is not the same as the content in the other div and therefore the height of the two floated div is different from one another.

However, I want that the div's have a border that seperates them and I would like this border to be from top to bottom of the containing div regardless of which of the two floated div is the highest. I could do this with javascript but I would like to know if there is some pure html/css option.

Here is my example;

Code:

<html>
	<head>
	
		<style>
		
		.main {
			margin: 0px auto;
			width: 800px;
			border: 2px solid red;
		}
		
		.wrap:after{

			content: ".";
			display: block;
			position:relative;
			height: 0;
			clear: both;
			visibility: hidden;
		}

		.wrap{

			display: inline-block;
		}

		/* Hides from IE-mac \*/
		* html .wrap{height: 1%;}
		div.wrap{display: block;}
		/* End hide from IE-mac */
		
		
		.left {
			float: left;
			width: 100px;
		}
		
		.right {
			float: left;
			width: 680px;
			border: 10px solid blue;
		}
		
		
		</style>
	
	</head>
	<body>
	
		<div class="main">
			<div class="wrap">
				<div class="left">My left div has more.<br/>more..<br /><br />more...<br /><br /><br />lines then the right one</div>
				<div class="right">My Right div has only one line but need border till down there ...</div>
			</div>
		</div>

		
	</body>
</html>

As you can see in the example the border of the right div does not go down till the bottom border of the main div.

Hi, I have been puzzle for a while now working out how to do this.

I have two fixed height divs which I want to appear on the same line (inline). However to maintain the fixed height they cannot be set as display: inline; (Well that works in IE but not in Firefox).
Anyway I find out that setting one div to float left and the other to float right with another div with clear:both works fine. However when it comes to setting the position of the flash elements I want in each div element it works now in Firefox but not in IE.

I currently have:
<div id="diva">
<object id="face1" width="320" height="110">
<param name="face1" value="face1.swf">
<embed src="face1.swf" width="320" height="110">
</embed>
</object>
</div>
<div id="divb">
<object id="face2" width="320" height="110">
<param name="face2" value="face2.swf">
<embed src="face2.swf" width="320" height="110">
</embed>
</object>
</div>
<div id="clear"></div>

With the relavent css:
#div1 {
background-image : url(images/bg1.gif);
width: 381px;
height: 346px;
float: left;
text-align : center;
vertical-align : bottom;
}
#div2 {

background-image : url(images/bg2.gif);
width: 381px;
height: 346px;
float: right;
text-align: center;
vertical-align : bottom;
}
#clear { clear: both; }
img {
border: 0px;
}
#face1{

padding-top: 220px;
left: 30px;
}
#face2{
position: relative;
top: 220px;
left: 10px;
}


Effectively what I want is:
Where the divs are on the same line and are fixed height (as they have a background) and then each swf element releatively positioned inside the div...which will work in Firefox and IE!

Thank you for your time.

Hi,
Take a look at this page: http://nazgulled.home.sapo.pt/table.html

This is easly done with tables as you can see, now, I want reproduce the same effect with divs but I don't know how.

My exact problem is, how can I center more than 1 div tag in the same "line". And for any div tag I use the float option, I can't align the text to anywhere, how can I do this too?

http://www.webpagedesignrus.co.uk/DECS

Code:

#container {
	margin: auto;
 	width: 100%;
 	display: block;
	text-align: center;
	height: 100%;
}

#middle {
	text-align: left;
	margin: auto;
	width: 600px;
	height: 100%;
	background-color: #FFF;
}

#main {
	margin: auto;
	background-color: #FFF;
	border-left: solid black 1px;
	border-right: solid black 1px;
	width: 650px;
	height: 100%;
	cell-padding: 0px;
	cell-spacing: 0px:
}

I can't get the white part to be 100% height... I need it to go to the bottom of the page... Please help...

I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways?

Thanks,
Carlos

Code:

<!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>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
  <div id="navbar">
    <p>testing</p>
    <p>testing</p>
    <p>testing</p>
  </div>
</div>
</body>
</html>

My CSS


Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color: #000;
	margin-top: 17px;
	margin-bottom: 15px;

}
#header {
	background-image: url(images/header.jpg);
	margin:0 auto;
	height: 167px;
	width: 810px;
	background-repeat: no-repeat;
}

#maincontent {
	background-image: url(images/coatedmetalsm.jpg);
	background-repeat: repeat;
	margin:0 auto;
	width: 810px;
	height: auto;
}
#navbar {
	float: left;
	width: auto;
	position: relative;
}

I am trying to make to div tags enclosed inside another div tag align horizontally. I am trying to do this without absolute positioning. See image below

Any ideas? Thank you.

I'm working on a new template for my site. I've just finished up the the basics for the layout but the two main divs aren't the same height.

I know I can give the body a height and then give the divs a height but I want then I have to use overflow scroll which I don't want.

I want the divs to be the same height but for the over all height to adjust to the size of the content.

Is this possible?

You can see the layout I have in the following gif. If anyone wants to see the code I've written so far, just ask and I'll upload a zip file or something.

It's the divs with the screenshot link and the test text that I want to be the same height. I've not assigned height properties to either as just giving them height:100% properties seems to do nothing.

How do I get the 'results' div to be 100% in height ?

The page height changes depending on the page being shown so need to have the height of the div to be 100%, but using 100% for the div does not make it 100% !

Any ideas how I do this ?


Code:

<!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" xml:lang="en" lang="en">
<head>
<title>..</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="en" />
<meta name="rating" content="General" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="2 days" />
<meta http-equiv="expires" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-language" content="en" />

<style type="text/css">
/* div { border: 1px solid blue; } */

body { border: 0px solid #A52A2A; background-color: #F2F2F2; } /* brown */
.outerBody { width: 1150px; margin: 0 auto; }
.bodyContainer { float: left; width: 1150px; padding: 1px 0 5px 0;		border: 0px solid #A52A2A; }

.menu {					float: left; width: 100%; text-align: center; font-size: 15pt; font-family: Broadway; border: 0px solid #EDB6B6; }
.widthLimiter{ width: 100%; margin: 0 auto; }
.menuwidthLimiter{ width: 100%; margin: auto; text-align: center; } /* width: 1200px; */

ul{ list-style: none; padding: 0px; margin: 0px; }
ul#navbar{ width:auto; list-style: none; padding: 0px; margin: 0px auto; height: auto; overflow: hidden; background-color: #F2F2F2; /* white */   display: table; }
ul#navbar li, ul#navbar1 li{ float:left!important; display:inline!important; margin: 0px; }
ul#navbar li a { display:block; float:left;}
a:link,a:visited,a:active{ color: #757575; font-weight: bold; text-decoration: none; }
a:hover{ color: #222; text-decoration: underline; }
#navbar a:link,#navbar a:active,#navbar a:visited{ display:inline-block; color: #757575; text-decoration: none; border-left: 1px solid #DDD; border-right: 1px solid #DDD;  padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ margin: 0px 4px 0px 4px; /* margin: 0px 5px 0px 5px; */ }
#navbar a:hover{ background: url('images/headerBarBgHover.png') repeat-x center #999999; display:inline-block; color: #222; text-decoration: underline; padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ }

.leftSideImagePanel		{ float: left; width: 30px; height: 100%; overflow: hidden; padding: 0px 5px 0 5px; background-color: #F2F2F2; border: 0px solid #999999; }
.specials { float: left; width: 180px; height: 100%; overflow: hidden; margin: 15px 5px 0 5px; padding: 5px; border: 0px solid #999999; background-color: #DADADA; border-radius:18px; } /* light grey */

form{ padding: 0px; margin: 0 auto; }

.outerbodycontainer { float: left; width: 870px; height: 100%;		border: 0px solid green; }
.innerbodycontainer { float: left; width: 870px; height: 100%; border-bottom: 0px solid #EDB6B6; }
.searchCategoryBox {	border-right: 1px solid #EDB6B6; float: left;	width: 130px; height: 100%; padding: 3px 3px 10px 10px; font-size: 9pt; }

.results { 		border: 1px solid #E5E5E5; float: left; width: 713px; height: 100%; padding: 4px 4px 4px 6px; font-size: 9pt; }

hr.smallDivider { color: #EDB6B6; height: 1px; } /* brown = #A52A2A */
.catListLineHeight {	line-height: 12px; }
a.cat { text-decoration: none; }
a.cat:link {	color: #333333; } /* grey */
a.cat:visited {	color: #333333; } /* grey */
a.cat:hover {	color: black; }
a.activeCat:link {	color: blue; text-decoration: none; }

.clearfloat {			clear: both; }
.indent {				padding-left: 40px; }
.center {				text-align: center; }
.centerTitles { text-align: center; font-weight: bold; font-size: 12pt; }
</style>
</head>
<body>

<div class="outerBody">



<!-- bodyContainer start -->
<div class="bodyContainer">
<img alt="logo" src="images/header-trans.png" height="79" width="1150" />
	<!-- menu start -->
	<div class="menu">
    <div class="menuwidthLimiter">
      <ul id="navbar">
		<li> <a href="index.php">Home</a> </li>

		<li> <a href="cart.php">Our catalogue</a> </li>
		<li> <a href="cart.php?mycart=yes">View your cart</a> </li>
		<li> <a href="map.php">Store locations</a> </li>
		<li> <a href="contactus.php">Contact us</a> </li>

		<li> <a href="aboutus.php">About us</a> </li>
      </ul>
    </div>
</div>
	<!-- menu end -->
<div class="leftSideImagePanel">
<div style="width: 130px;">&nbsp;</div></div>

<div class="outerbodycontainer">
<!-- innerbodycontainer start -->

<div class="innerbodycontainer">
		<!-- search start -->
			<div class="searchCategoryBox">
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
  			</div>

		<!-- search end -->

		<!-- results start -->
		<div class="results">
		<br />
<br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />
<br />wanting the 'results' div to be 100% in height.
		</div>
		<!-- results end -->
		<div style="text-align: center; font-weight: bold; font-size: 10pt; font-style: italic;"><br />Prices correct at time of upload.&nbsp;&nbsp;Products, descriptions and prices subject to alteration and/or removal.</div>

</div>
<!-- innerbodycontainer end -->
<br class="clearfloat" />

</div>

<div class="rightSideImagePanel">
	<!-- start of specials -->
	<div class="specials">specials</div>
	<!-- end of specials -->
</div>



</div>
<!-- body container end -->
</div><!-- end of outerBody -->
</body>
</html>

If you take a look here http://www.challengeyourdiet.com/login

you may notice that the page does not go all the way down on big screens. I would like my footer to automatically fall to the bottom of the page no matter what screen size someone has. Any ideas?

Thanks!

I'm not so CSS savvy, can anyone help me with the specific changes needed here that will force the 3 columns to load height at 100% or full column height?

Also is it possible to have multiple content boxes loading one above the other in the left and right columns instead of one long content box?

jarsandmixes.com/liquid.php





body {
background-color: #FFF7EF;
}

div {
text-align:center;
}

div#wrapper {
background-color: transparent;
border:0px solid black;
margin:0px auto;
text-align:left;
position:relative;
width:100%;
height:100%;
min-height:100%;
}

div#border {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:10px;
}

div#page {
background-color: #DEC6B5;
border:1px dashed black;
position:relative;
clear:both;
float:left;
width:100%;
height:100%;
min-height:100%;
padding-bottom: 10px;
overflow:hidden;
}

div#header {
background-image: url(images/.gif);
background-repeat: no-repeat;
border:1px dashed black;
margin:0px;
padding:0px;
width:100%;
height:80px;
}

div#menu {
clear: both;
background-color: #CA7B93;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:30px;
}

div#left1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
float:left;
margin:5px;
width:20%;
height:auto;
}

div#left2 {
background-color: #FFF7EF;
background-image: url(images/bkg3.gif);
background-repeat: repeat;
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
right:20px;
width:90%;
height:auto;
}

div#content1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
border:1px solid black;
margin:5px auto;
width:54%;
height:auto;
}

div#content2 {
background-color: #DEC6B5;
background-image: url(images/bkg3.gif);
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
width:96%;
height:auto;
}

div#divider {
background-image: url(images/.gif);
background-repeat: no-repeat;
margin:10px auto;
width:439px;
height:60px
}

div#right1 {
background-image: url(images/bkg2.gif);
background-repeat: repeat;
float:right;
border:1px solid black;
margin:5px;
right:10px;
width:20%;
height:auto;
}

div#right2 {
background-color: #FFF7EF;
background-image: url(images/bkg3.gif);
background-repeat: repeat;
border:1px solid black;
margin:0px 5px 0px 5px;
padding:4px;
right:20px;
width:90%;
height:auto;
}

div#footer {
clear: both;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
width:100%;
height:30px;
}