Databases
StackOverflow2013
Postsdbo
POSetting a div's height in HTML with CSS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSetting a div's height in HTML with CSS
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNhan
    1. USChris Farmer
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSetting a div's height in HTML with CSS
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POSetting a div's height in HTML with CSS
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POSetting a div's height in HTML with CSS
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload