ansaurus

Question

CSS - need column to flow all the way to the bottom in a 3 column layout

Answer 1

+1 A:

I'm pretty sure this tactic will work for you: http://www.ejeliot.com/blog/61

Edit: Ok, here we go.

Looking past the Dreamweaver template and split up inline CSS, I have made adjustments as follows:

1> Move mainContent between sidebar1 and sidebar2 in the HTML.
2> Change sidebar1's css to:

.thrColFixHdr #sidebar1 {
    float: left;
    width: 150px;
    background: #CCCCCC;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

The background has been changed to highlight the effect on the page.

3> Change sidebar2's css to:

.thrColFixHdr #sidebar2 {
    float: left;
    width: 160px;
    background: #EEEEEE;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

4> Change mainContent's css to:

.thrColFixHdr #mainContent {
    float: left;
    width: 390px;
    background: #DDDDDD;
    padding: 0 10px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

5> Add a definition for contentContainer:

.thrColFixHdr #contentContainer {
    overflow: hidden;
}

6> Change .footer to #footer and change margin-top: 8px to padding-top: 8px and add text-align:center and break up the footer text.

Entire code run through Notepad++ HTML Tidy here (some tab formatting slightly lost when putting into Stack Overflow):

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<meta http-equiv="Content-Type" content=
"text/html; charset=iso-8859-1" />

<title>Untitled Document</title>
<style type="text/css">
/*<![CDATA[*/

body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
}
.thrColFixHdr #container { 
    width: 780px;
    background: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;
} 
.thrColFixHdr #header { 
    background: #DDDDDD; 
    padding: 0 10px 0 20px; 
} 
.thrColFixHdr #header h1 {
    margin: 0;
    padding: 10px 0;
}
.thrColFixHdr #contentContainer {
    overflow: hidden;
}
.thrColFixHdr #sidebar1 {
    float: left;
    width: 150px;
    background: #CCCCCC;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}
.thrColFixHdr #sidebar2 {
    float: left;
    width: 160px;
    background: #EEEEEE;
    padding: 15px 10px 0px 20px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}
.thrColFixHdr #mainContent { 
    float: left;
    background: #DDDDDD;
    width: 390px;
    padding: 0 10px;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
} 
.thrColFixHdr #footer { 
    padding: 0 10px 0 20px;
    background:#BBBBBB;
} 
.thrColFixHdr #footer p {
    margin: 0;
    padding: 10px 0;
}
.clearfloat { 
    clear:both;
 height:0;
 font-size: 1px;
 line-height: 0px;
}
/*]]>*/
</style>
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

<style type="text/css">
/*<![CDATA[*/
.side a {
    color: #FFF;
    text-decoration: none;
}
a.side:link {color:#FF3;
text-decoration: none;
}      /* unvisited link */
a.side:visited {color:#FFF
text-decoration: none;
}  /* visited link */
a.side:hover {color:#C00}
a.side:active {color:#C00}

/*]]>*/
</style>
<style type="text/css">
/*<![CDATA[*/
#footer {
    font: 12px Arial, Helvetica, sans-serif;
    color: #FF3;
    text-decoration: none;
    padding-top: 8px;
 text-align: center;
}
a.footer:link {color:#FF3}
a.footer:visited {color:#FFF}
a.footer:hover {color:#C00} 
a.footer:active {color:#C00}
/*]]>*/
</style>
</head>

<body class="thrColFixHdr">
<div id="container">
<div id="header">
  <h1>Header</h1><!-- end #header -->
</div>

<div id="contentContainer">
  <div id="sidebar1">
    <h3>Sidebar1 Content</h3>

    <p>The background color on this div will only show for the
    length of the content. If you&#39;d like a dividing line
    instead, place a border on the left side of the #mainContent
    div if it will always contain more content.</p>

    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
    pellentesque eget, cursus et, fermentum ut, sapien.</p>
    <!-- end #sidebar1 -->
  </div>

  <div id="mainContent">
    <h1>Main Content</h1>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Praesent aliquam, justo convallis luctus rutrum, erat nulla
    fermentum diam, at nonummy quam ante ac quam. Maecenas urna
    purus, fermentum id, molestie in, commodo porttitor, felis. Nam
    blandit quam ut lacus. Quisque ornare risus quis ligula.
    Phasellus tristique purus a augue condimentum adipiscing.
    Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
    in, vulputate at, odio. Donec et ipsum et sapien vehicula
    nonummy. Suspendisse potenti.</p>

    <h2>H2 level heading</h2>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Praesent aliquam, justo convallis luctus rutrum, erat nulla
    fermentum diam, at nonummy quam ante ac quam. Maecenas urna
    purus, fermentum id, molestie in, commodo porttitor, felis. Nam
    blandit quam ut lacus. Quisque ornare risus quis ligula.
    Phasellus tristique purus a augue condimentum adipiscing.
    Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique
    in, vulputate at, odio.</p><!-- end #mainContent -->
  </div>

  <div id="sidebar2">
    <!-- #BeginLibraryItem "/Library/sidebar2.lbi" -->

    <div align="center" class="side">
      <img src="images/seHable.jpg" width="162" height="48" alt=
      "Se Habla Espanol" border="0" /><br />
      <br />
      <a href="https://secure.carfax.com/creditCard.cfx" target=
      "_blank"><img src="images/carfax.jpg" width="145" height="35"
      alt="CARFAX" border="0" /></a><br />
      <a href="https://secure.carfax.com/creditCard.cfx" target=
      "_blank">FREE CAR FAX</a><br />
      <br />
      <a href=
      "http://www.autorepair.ca.gov/pubwebquery/Vehicle/PubTstQry.aspx"
      target="_blank"><img src="images/caGOV.jpg" width="109"
      height="78" alt="CA.gov" longdesc=
      "http://www.autorepair.ca.gov/pubwebquery/Vehicle/PubTstQry.aspx"
      border="0" /><br />
      Verify a Smog Check</a><br />
      <br />
      <a href="http://www.iihs.org/ratings/default.aspx" target=
      "_blank"><img src="images/topSafetyPick.jpg" width="111"
      height="131" alt="Top Safety Picks" longdesc=
      "http://www.iihs.org/ratings/default.aspx" border=
      "0" /><br />
      Top Safety Picks</a><br />
      <br />
      <a href="http://www.kbb.com/" target="_blank"><img src=
      "images/kbb.jpg" width="155" height="56" alt=
      "Kelly Blue Book" longdesc="http://www.kbb.com/" border=
      "0" /><br />
      Kelly Blue Book</a>
    </div><!-- #EndLibraryItem -->

    <h3>Sidebar2 Content</h3>

    <p>The background color on this div will only show for the
    length of the content. If you&#39;d like a dividing line
    instead, place a border on the right side of the #mainContent
    div if it will always contain more content.</p>

    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
    pellentesque eget, cursus et, fermentum ut, sapien.</p>
    <!-- end #sidebar2 -->
  </div>
  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
  </div>

<div id="footer">
  <!-- #BeginLibraryItem "/Library/footer.lbi" -->
  <span class="footer">CENTURY AUTO GROUP, INC. |
  619.281.2300<br />
  COPYRIGHT 2009-2011 ALL RIGHTS RESERVED | EMAIL: <a href=
  "mailto:[email protected]" class=
  "footer">[email protected]</a></span> 
  <!-- #EndLibraryItem --><!-- end #footer -->
</div><!-- end #container -->
</div>
</body>
</html>

Tegeril 2009-12-17 02:26:15

I certainly appreciate your answer and I read thru it and tried some of the examples without success. It still seems that the containers do not hold the same height as the container. Is there any chance you can go to this site and then tell me how to change the CSS?http://www.centuryautosd.com/help.aspIf you can show me how to change the CSS on this I can use it to change all my pages because that is the template I started with..thank you so much

Drea 2009-12-17 16:35:55

and the other issue is that each page generates a different group of cars (sometimes only 1 car, hence a "short page" and other times 20 cars which causes the page to be long) so the columns always have to fit the size of the page as it dynamically unfolds.

Drea 2009-12-17 16:42:25

If I get a chance this evening, I will try to take a look for you. ::makes a note::

Tegeril 2009-12-17 17:09:30

Solution updated.

Tegeril 2009-12-18 05:04:09

If this gets you where you need to be, I'm growing addicted to the StackOverflow treadmill and would appreciate an accepted solution mark :)

Tegeril 2009-12-18 05:14:22

ansaurus

tags:

views:

answers:

CSS - need column to flow all the way to the bottom in a 3 column layout

related questions