SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Divs need to expand vertically to accommodate content

    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

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

    Code:
    @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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    #outerWrapper, #content {
        overflow: hidden;
    }
    Hope that helps!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph - you've solved the problem!

  4. #4
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    This thread is fine.

    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:

    http://www.sitepoint.com/forums/show...66&postcount=3

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

    http://www.pmob.co.uk/temp/sticky-fo...w-no-table.htm
    http://www.pmob.co.uk/temp/fixed-footer-only.htm
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - I'll look into these.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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 —but if you have trouble working with the code, do post back here. There are lots of experts lurking around!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •