<p>I am trying to lay out a table-like page with two columns.  I want the rightmost column to dock to the right of the page, and this column should have a distinct background color.  The content in the right side is almost always going to be smaller than that on the left.  I would like the div on the right to always be tall enough to reach the separator for the row below it.  How can I make my background color fill that space?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="separator"&gt;
  &lt;div class="rightfloat"&gt;
    Some really short content.
  &lt;/div&gt;
  &lt;div class="left"&gt; 
    Some really really really really really really
    really really really really big content
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="separator"&gt;
  &lt;div class="rightfloat"&gt;
    Some more short content.
  &lt;/div&gt;
  &lt;div class="left"&gt; 
    Some really really really really really really
    really really really really big content
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<hr>

<p>Edit:  I agree that this example is very table-like and an actual table would be a fine choice.  But my "real" page will eventually be less table-like, and I'd just like to first master this task!</p>

<p>Also, for some reason, when I create/edit my posts in IE7, the code shows up correctly in the preview view, but when I actually post the message, the formatting gets removed.  Editing my post in Firefox 2 seems to have worked, FWIW.</p>

<hr>

<p>Another edit: Yeah, I unaccepted GateKiller's answer.  It does indeed work nicely on my simple page, but not in my actual heavier page.  I'll investigate some of the links y'all have pointed me to.</p>

[{'answer_id': 4979, 'author': 'Teifion', 'author_id': 1384652, 'author_profile': 'https://Stackoverflow.com/users/1384652', 'pm_score': 2, 'selected': False, 'text': '<p>I had the same problem on my site (<a href="http://woarl.com" rel="nofollow noreferrer">shameless plug</a>).</p>\n\n<p>I had the nav section "float: right" and the main body of the page has a background image about 250px across aligned to the right and "repeat-y". I then added something with "clear: both" to it. Here is the W3Schools and the <a href="http://www.w3schools.com/Css/pr_class_clear.asp" rel="nofollow noreferrer">CSS clear property</a>.</p>\n\n<p>I placed the clear at the bottom of the "page" classed div. My page source looks something like this.</p>\n\n<pre><code>body\n -&gt; header (big blue banner)\n -&gt; headerNav (green bar at the top)\n -&gt; breadcrumbs (invisible at the moment)\n -&gt; page\n     -&gt; navigation (floats to the right)\n     -&gt; content (main content)\n         -&gt; clear (the quote at the bottom)\n         -&gt; footerNav (the green bar at the bottom)\n     -&gt; clear (empty but still does something)\n -&gt; footer (blue thing at the bottom)\n</code></pre>\n\n<p>I hope that helps :)</p>\n'}, {'answer_id': 4983, 'author': 'Adam Haile', 'author_id': 194, 'author_profile': 'https://Stackoverflow.com/users/194', 'pm_score': 0, 'selected': False, 'text': '<p>Just trying to help out here so the code is more readable.<br>\nRemember that you can insert code snippets by clicking on the button at the top with "101010". Just enter your code then highlight it and click the button.</p>\n\n<p>Here is an example:</p>\n\n<pre><code>&lt;html&gt;\n    &lt;body&gt;\n    &lt;style type="text/css"&gt;\n        .rightfloat {\n            color: red;\n            background-color: #BBBBBB;\n            float: right;\n            width: 200px;\n        }\n\n        .left {\n            font-size: 20pt;\n        }\n\n        .separator {\n            clear: both;\n            width: 100%;\n            border-top: 1px solid black;\n        }\n    &lt;/style&gt;\n</code></pre>\n'}, {'answer_id': 5019, 'author': 'GateKiller', 'author_id': 383, 'author_profile': 'https://Stackoverflow.com/users/383', 'pm_score': 3, 'selected': False, 'text': '<p>Give this a try:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>html, body,\r\n#left, #right {\r\n  height: 100%\r\n}\r\n\r\n#left {\r\n  float: left;\r\n  width: 25%;\r\n}\r\n#right {\r\n  width: 75%;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;\r\n  &lt;body&gt;\r\n    &lt;div id="left"&gt;\r\n      Content\r\n    &lt;/div&gt;\r\n    &lt;div id="right"&gt;\r\n      Content\r\n    &lt;/div&gt;\r\n  &lt;/body&gt;\r\n&lt;/html&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 5028, 'author': 'Rich Reuter', 'author_id': 283, 'author_profile': 'https://Stackoverflow.com/users/283', 'pm_score': 2, 'selected': False, 'text': '<p>Here\'s an example of equal-height columns - <a href="http://positioniseverything.net/articles/onetruelayout/equalheight" rel="nofollow noreferrer">Equal Height Columns - revisited</a></p>\n\n<p>You can also check out the idea of "Faux Columns" as well - <a href="http://www.alistapart.com/articles/fauxcolumns/" rel="nofollow noreferrer">Faux Columns</a></p>\n\n<p>Don\'t go the table route.  If it\'s not tabular data, don\'t treat it as such.  It\'s bad for accessibility and flexibility.</p>\n'}, {'answer_id': 5035, 'author': 'GateKiller', 'author_id': 383, 'author_profile': 'https://Stackoverflow.com/users/383', 'pm_score': 0, 'selected': False, 'text': '<p>The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.</p>\n'}, {'answer_id': 5096, 'author': 'Dan Herbert', 'author_id': 392, 'author_profile': 'https://Stackoverflow.com/users/392', 'pm_score': 0, 'selected': False, 'text': '<p>A 2 column layout is a little bit tough to get working in CSS (at least until CSS3 is practical.)</p>\n\n<p>Floating left and right will work to a point, but it won\'t allow you to extend the background. To make backgrounds stay solid, you\'ll have to implement a technique known as "faux columns," which basically means your columns themselves won\'t have a background image. Your 2 columns will be contained inside of a parent tag. This parent tag is given a background image that contains the 2 column colors you want. Make this background only as big as you need it to (if it is a solid color, only make it 1 pixel high) and have it repeat-y. AListApart has a great walkthrough on what is needed to make it work.</p>\n\n<p><a href="http://www.alistapart.com/articles/fauxcolumns/" rel="nofollow noreferrer">http://www.alistapart.com/articles/fauxcolumns/</a></p>\n'}, {'answer_id': 5103, 'author': 'Polsonby', 'author_id': 137, 'author_profile': 'https://Stackoverflow.com/users/137', 'pm_score': 6, 'selected': True, 'text': '<p>Ahem...</p>\n\n<blockquote>\n  <p>The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.</p>\n</blockquote>\n\n<p>Actually, 100% height will not work in most design situations - this may be short but it is not a good answer. Google "any column longest" layouts. The best way is to put the left and right cols inside a wrapper <code>div</code>, float the left and right cols and then float the wrapper - this makes it stretch to the height of the inner containers - then set background image on the outer wrapper. But watch for any horizontal margins on the floated elements in case you get the IE "double margin float bug".</p>\n'}, {'answer_id': 5617, 'author': 'Ricky', 'author_id': 653, 'author_profile': 'https://Stackoverflow.com/users/653', 'pm_score': 0, 'selected': False, 'text': '<p>I can think of 2 options</p>\n\n<ol>\n<li>Use javascript to resize the smaller column on page load.</li>\n<li>Fake the equal heights by setting the <code>background-color</code> for the column on the container <code>&lt;div/&gt;</code> instead (<code>&lt;div class="separator"/&gt;</code>) with <code>repeat-y</code></li>\n</ol>\n'}, {'answer_id': 1029876, 'author': 'mxmissile', 'author_id': 9604, 'author_profile': 'https://Stackoverflow.com/users/9604', 'pm_score': 3, 'selected': False, 'text': '<p>I gave up on strictly CSS and used a little jquery:</p>\n\n<pre><code>var leftcol = $("#leftcolumn");\nvar rightcol = $("#rightcolumn");\nvar leftcol_height = leftcol.height();\nvar rightcol_height = rightcol.height();\n\nif (leftcol_height &gt; rightcol_height)\n    rightcol.height(leftcol_height);\nelse\n    leftcol.height(rightcol_height);\n</code></pre>\n'}, {'answer_id': 1030017, 'author': 'georgebrock', 'author_id': 5168, 'author_profile': 'https://Stackoverflow.com/users/5168', 'pm_score': 3, 'selected': False, 'text': '<p>Some browsers support CSS tables, so you could create this kind of layout using the various CSS <code>display: table-*</code> values.  There\'s more information on CSS tables in this article (and the book of the same name) by Rachel Andrew: <a href="http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/" rel="nofollow noreferrer">Everything You Know About CSS is Wrong</a></p>\n\n<p>If you need a consistent layout in older browsers that don\'t support CSS tables, you need to do two things:</p>\n\n<ol>\n<li><p><em>Make your "table row" element clear its internal floated elements.</em></p>\n\n<p>The simplest way of doing this is to set <code>overflow: hidden</code> which takes care of most browsers, and <code>zoom: 1</code> to trigger the <code>hasLayout</code> property in older versions of IE.</p>\n\n<p>There are many other ways of clearing floats, if this approach causes undesirable side effects you should check the question <a href="https://stackoverflow.com/a/1633170/5168">which method of \'clearfix\' is best</a> and the article <a href="http://www.satzansatz.de/cssd/onhavinglayout.html" rel="nofollow noreferrer">on having layout</a> for other methods.</p></li>\n<li><p><em>Balance the height of the two "table cell" elements.</em></p>\n\n<p>There are two ways you could approach this.  Either you can create the appearance of equal heights by setting a background image on the "table row" element (the <a href="http://www.alistapart.com/articles/fauxcolumns/" rel="nofollow noreferrer">faux columns technique</a>) or you can make the heights of the columns match by giving each a large padding and equally large negative margin.</p>\n\n<p>Faux columns is the simpler approach and works very well when the width of one or both columns is fixed.  The other technique copes better with variable width columns (based on percentage or em units) but can cause problems in some browsers if you link directly to content within your columns (e.g. if a column contained <code>&lt;div id="foo"&gt;&lt;/div&gt;</code> and you linked to <code>#foo</code>)</p></li>\n</ol>\n\n<p>Here\'s an example using the padding/margin technique to balance the height of the columns.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {\r\n  height: 100%;\r\n}\r\n\r\n.row {\r\n  zoom: 1;          /* Clear internal floats in IE */\r\n  overflow: hidden; /* Clear internal floats */\r\n}\r\n\r\n.right-column,\r\n.left-column {\r\n  padding-bottom: 1000em;  /* Balance the heights of the columns */\r\n  margin-bottom: -1000em;  /*                                    */\r\n}\r\n\r\n.right-column {\r\n  width: 20%;\r\n  float: right;\r\n}\r\n\r\n.left-column {\r\n  width: 79%;\r\n  float: left;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;\r\n  &lt;div class="right-column"&gt;Right column content&lt;/div&gt;\r\n  &lt;div class="left-column"&gt;Left column content&lt;/div&gt;\r\n&lt;/div&gt;\r\n&lt;div class="row"&gt;\r\n  &lt;div class="right-column"&gt;Right column content&lt;/div&gt;\r\n  &lt;div class="left-column"&gt;Left column content&lt;/div&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>This Barcamp demo by Natalie Downe may also be useful when figuring out how to add additional columns and nice spacing and padding: <a href="http://natbat.net/code/clientside/css/equalColumnsDemo/11.html" rel="nofollow noreferrer">Equal Height Columns and other tricks</a> (it\'s also where I first learnt about the margin/padding trick to balance column heights)</p>\n'}, {'answer_id': 15599857, 'author': 'user2194160', 'author_id': 2194160, 'author_profile': 'https://Stackoverflow.com/users/2194160', 'pm_score': 0, 'selected': False, 'text': '<p>It\'s enough to just use the css property <code>width</code> to do so.</p>\n\n<p>Here is an example:</p>\n\n<pre><code>&lt;style type="text/css"&gt;;\n    td {\n        width:25%;\n        height:100%;\n        float:left;\n    }\n&lt;/style&gt;\n</code></pre>\n'}, {'answer_id': 18505213, 'author': 'Palm Int Srv', 'author_id': 2086668, 'author_profile': 'https://Stackoverflow.com/users/2086668', 'pm_score': 0, 'selected': False, 'text': '<p>This should work for you: Set the height to 100% in your css for the <code>html</code> and <code>body</code> elements. You can then adjust the height to your needs in the <code>div</code>.</p>\n\n<pre><code>html {\n    height: 100%;\n}\n\nbody {\n    height: 100%;\n}\ndiv {\n    height: 100%; /* Set Div Height */\n} \n</code></pre>\n'}, {'answer_id': 44718603, 'author': 'pragadeesh mahendran', 'author_id': 8203775, 'author_profile': 'https://Stackoverflow.com/users/8203775', 'pm_score': 1, 'selected': False, 'text': '<p>No need to write own css, there is an library called "Bootstrap css" by calling that in your HTML head section, we can achieve many stylings,Here is an example:\nIf you want to provide two column in a row, you can simply do the following:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;\r\n\r\n&lt;div class="row"&gt;\r\n  &lt;div class="col-md-6"&gt;Content&lt;/div&gt;\r\n  &lt;div class="col-md-6"&gt;Content&lt;/div&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Here md stands for medium device,,you can use col-sm-6 for smaller devices and col-xs-6 for extra small devices</p>\n'}, {'answer_id': 56416085, 'author': 'aspirew', 'author_id': 11590170, 'author_profile': 'https://Stackoverflow.com/users/11590170', 'pm_score': 0, 'selected': False, 'text': '<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.rightfloat {\r\n  color: red;\r\n  background-color: #BBBBBB;\r\n  float: right;\r\n  width: 200px;\r\n}\r\n\r\n.left {\r\n  font-size: 20pt;\r\n}\r\n\r\n.separator {\r\n  clear: both;\r\n  width: 100%;\r\n  border-top: 1px solid black;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="separator"&gt;\r\n  &lt;div class="rightfloat"&gt;\r\n    Some really short content.\r\n  &lt;/div&gt;\r\n  &lt;div class="left"&gt; \r\n    Some really really really really really really\r\n    really really really really big content\r\n  &lt;/div&gt;\r\n&lt;/div&gt;\r\n&lt;div class="separator"&gt;\r\n  &lt;div class="rightfloat"&gt;\r\n    Some more short content.\r\n  &lt;/div&gt;\r\n  &lt;div class="left"&gt; \r\n    Some really really really really really really\r\n    really really really really big content\r\n  &lt;/div&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}]
['https://Stackoverflow.com/questions/4973', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/404/']