Divs need to expand vertically to accommodate content

HTML & CSS
1

Hi everyone,

I’m trying to get my layout to expand vertically if there’s more content.

The main sections are as follows:

<div id=“fullWidthHeader”>
<div id=“tile_trans”>
<div id=“inner”> </div>
</div>
</div>

Then there’s the #outerWrapper div that encloses all the content:

<div id=“outerWrapper”>
<div id=“branding”>
</div>
<div id=“content”>
<div id=“content_main”>
<div id=“content_inner” class=“inner”>
<div id=“inner_text”>

and then there’s the footer section:

<div id=“fullWidthFooter”>
<div id=“fullWidthFooter_inner”>
<p>All rights reserved. <a href=“#”>Privacy Policy</a> | <a href=“#”>Terms and Conditions</a> | <a href=“#”>Ordering</a> | <a href=“#”>Shipping</a> | <a href=“#”>Returns</a></p>
</div>
</div>

The full html and css is below.

It’s the center section that’s enclosed within the #outerWrapper div that needs to expand depending on the amount of content.

I tried making height: auto in the following rules:

#outerWrapper {
background-color: transparent;
margin: 0 auto 0;
text-align: left;
width: 900px;
height: auto;
position: relative;
z-index: 3;
}

div#content {
background-color: rgb(22,50,92);
min-height: 476px;
height: auto;
}

div#content_main {
width: 696px;
min-height: 436px;
height: auto;
margin: 20px;
float: right;
background-color: #fff;
}

div#inner_text {
width: 616px;
min-height: 240px;
height: auto;
padding: 30px 40px 0;
overflow: auto;
}

But when I do this, the only element that seems to be expand is div#inner_text, but this just breaks out of the elements that contain it, ie. div#content, div#content_main etc.

I wondered if I could get some help solving this?

Thanks in advance.

Xhtml

<!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</title>
<link href="/css/screen.css" rel="stylesheet" type="text/css" />
<script type="/js/curvycorners.src.js"></script>
</head>

<body>
<div id="fullWidthHeader">
	<div id="tile_trans">
    	<div id="inner"> </div>
    </div>

</div>
<div id="outerWrapper">
  <div id="branding">
    <div id="nav_main" class="round">
    <h2>Main navigation</h2>
    <ul id="nav_bar">
      <li id="Link1"><a href="#">Link1</a></li>
      <li id="Link2"><a href="#">Link2</a></li>
      <li id="Link3"><a href="#">Link3</a></li>
      <li id="Link4"><a href="#">Link4</a>
      </li>
      <li id="Link5"><a href="#">Link5</a></li>
      <li id="Link6" class="last"><a href="#">Link6</a></li>
    </ul>
  </div>


  </div>
  <div id="content">
  <div id="content_main">
<div id="content_inner" class="inner">
<div id="inner_text">

</div>

 </div>
</div>
  <div id="sidebar">
    <h3 class="round2">Apparel Categories</h3>
    <div id="p7TMnav">
      <div><a href="#" onclick="P7_TMenu(this);return false">+ Categories</a>
      <div> <?php echo "<a href=\\"$url_business/index.php?subcatID=1&amp;itemTypeID=1\\">Category</a>"?></div>
      <div> <?php echo "<a href=\\"$url_business/index.php?subcatID=1&amp;itemTypeID=2\\">Category</a>"?></div>
      <div> <?php echo "<a href=\\"$url_business/index.php?subcatID=1&amp;itemTypeID=3\\">Category</a>"?></div>
      <div> <?php echo "<a href=\\"$url_business/index.php?subcatID=1&amp;itemTypeID=4\\">Category</a>"?></div>
      <div> <?php echo "<a href=\\"$url_business/index.php?subcatID=1&amp;itemTypeID=5\\">Category</a>"?></div>
      <div> <?php echo "<a href=\\"$url_business/index.php?subcatID=1&amp;itemTypeID=6\\">Category</a>"?></div>
      </div>
      <div> <?php echo "<a href=\\"$url_business/index.php?subcatID=2&amp;itemTypeID=3\\">Category</a>"?></div>
      <div> <?php echo "<a href=\\"$url_business/index.php?subcatID=3&amp;itemTypeID=3\\">Category</a>"?></div>
      <div> <?php echo "<a href=\\"#\\">Category</a>"?></div>
      <div> <?php echo "<a href=\\"$url_business/index.php?subcatID=5&amp;itemTypeID=3\\">Category</a>"?></div>
    </div>
  </div>
  </div>
</div>
<div id="fullWidthFooter">
  <div id="fullWidthFooter_inner">
    <p>&copy;2009. All rights reserved. <a href="#">Privacy Policy</a> | <a href="#">Terms and Conditions</a> | <a href="#">Ordering</a> | <a href="#">Shipping</a> | <a href="#">Returns</a></p>
  </div>
</div>
</body>
</html>

CSS:

@import url("reset.css");


body {
  background-color: #fff;
  color: #333;
  font: 75%/1.3 Arial, Helvetica, sans-serif;
  text-align: center;
  position: relative;
}

div#fullWidthHeader {
  background: url(../images/pattern.gif) repeat;
  height: 352px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

div#tile_trans {
  width: 100%;
  height: 352px;
  background: url(../images/tile_trans.png) repeat;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

div#inner {
  width: 100%;
  height: 49px;
  background: url(../images/pattern_tile_top.png) repeat-x;
}


#outerWrapper {
  background-color: transparent;
  margin: 0 auto 0;
  text-align: left;
  width: 900px;
  height: auto;
  position: relative;
  z-index: 3;
}


h2, h3,  h4 {
font-weight : bold;
}

h3{
font-weight : normal;
}


p {
font-size : 100%;
padding-bottom: 10px;
}


/*---------------------Links---------------------*/


a:link, a:visited  {
	color: rgb(189,189,176);
	text-decoration: none;
}

a:hover, a:active {
	color: rgb(189,189,176);
	text-decoration: none;
}

ul#nav_bar a:link {
color: rgb(189,189,176);
}


/*---------------------Branding---------------------*/

div#branding {
	position: relative;
	height: 124px;
}

div#branding h1 {
	width: 224px;
	height: 114px;
	background: url(../images/kc_logo.png) no-repeat left bottom;
	margin-bottom: 10px;
}

div#branding h1 a {
	display: block;
	width: 224px;
	height: 124px;
	text-indent: -9999px;
}

/*---------------------Navigation---------------------*/


div#nav_main {
position: absolute;
top: 89px;
left: 368px;
bottom: 0;
right: 0;
background: url(../images/nav_grad.jpg) repeat-x 0 0;
}

ul#nav_bar {
padding-left: 20px;
}

ul#nav_bar li {
display: inline;
width: auto;
list-style: none;
margin-right: 0.5em;
padding-right: 0.75em;
border-right: 1px solid #fff;
font-weight: bold;
text-align: center;
}


ul#nav_bar a {
line-height: 35px;
font-weight: normal;
color: #00274C;
text-decoration: none;
}


ul#nav_bar li.last {
border-right: 0;
}


div#nav_main h2 {
position: absolute;
top: -9999px;
}


/*---------------------Content---------------------*/


div#content {
	background-color: rgb(22,50,92);	
	min-height: 476px;
}


div#content_main {
	width: 696px;
	min-height: 436px;
	margin: 20px;
	float: right;
	background-color: #fff;
}

div#inner_text {
	width: 616px;
	min-height: 240px;	
padding: 30px 40px 0;
	overflow: auto;
}


div#sidebar {
	width: 164px;
	float: left;
}

div#sidebar h3 {
	height: 40px;
	text-indent: -9999px;
	background: url(../images/sidebar_h3.jpg) no-repeat 0 0;
}

div#sidebar ul {
	background-color: rgb(189,189,176);
	min-height: 416px;
}

div#sidebar ul li {
	text-indent: -9999px;
	padding-bottom: 12px;
}


div#sidebar li#formal a {
	display: block;
	background: url(../images/formal_btn-trans.png) no-repeat top center;
	width: 164px;
	height: 56px;
}


div#sidebar li#suits a {
	display: block;
	background: url(../images/suits_btn-trans.png) no-repeat top center;
	width: 164px;
	height: 56px;
}

/*---------------------Footer/Site_info---------------------*/


#fullWidthFooter {
  background: url(../images/pattern.gif) repeat;
  height: 140px;
  color: #fff;
  margin-top: 20px;
}

#fullWidthFooter_inner {
  width: 100%;
  height: 140px;
  background: url(../images/tile_trans_footer.png) repeat-x;
  color: rgb(189,189,176);
}


#fullWidthFooter_inner p {
	width: 900px;
	margin: 0 auto 0;
	text-align: left;
}

#fullWidthFooter a:link, a:visited  {
	color: rgb(189,189,176);
}

#fullWidthFooter a:hover, a:active  {
	color: rgb(189,189,176);
}
2

Hi gwh. This is an issue of “containing floats” or “clearing floats”. The containers do not wrap around floated content. One easy way around this is to apply overflow: hidden to the containers.

Add this to you style sheet to see:

#outerWrapper, #content {
    overflow: hidden;
}

Hope that helps!

3

Thanks Ralph - you’ve solved the problem!

4

Sorry to come back to this post. I know it’s a different question but it relates to the code I’ve already posted so I thought I’d ask here. You’ll notice that my footer code is outside the wrapper div:

<div id=“fullWidthFooter”>
<div id=“fullWidthFooter_inner”>
<p>All rights reserved. <a href=“#”>Privacy Policy</a> | <a href=“#”>Terms and Conditions</a> | <a href=“#”>Ordering</a> | <a href=“#”>Shipping</a> | <a href=“#”>Returns</a></p>
</div>
</div>

I wanted to have this code attach to the bottom of the browser window. Currently on larger monitors there’s white space below this section so I thought it would be better if it was attached and then on larger monitors the white space could be above.

Can I get some help achieving this?

If not, I can post a new thread.

5

This thread is fine. :slight_smile:

What you are asking for is a “sticky footer”. CSS isn’t well designed for this, but ways have been developed to do it. Here is a guide presented by SitePoint that will teach you what you need to know:

Here are some other examples posted by Paul O’Brien (who wrote the post above):

http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm
http://www.pmob.co.uk/temp/fixed-footer-only.htm

6

Thanks - I’ll look into these.

7

Yes, it may take a bit of study, so initially I’ve just posted links. I don’t really get into stuff that CSS wasn’t designed to do; I prefer to let footers find their own place—you know, like God intended :wink: —but if you have trouble working with the code, do post back here. There are lots of experts lurking around!