Databases
StackOverflow2013
Postsdbo
POLayout with 2 variable-height columns
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLayout with 2 variable-height columns
    primarykey
    data
    text
    <p>I'm trying to create the following 2-column layout in my webpage:</p> <pre><code>+-------+---+ | | | | | | | A | B | | | | | | | | | | | +---+ | | | | | C | | | | +-------+---+ </code></pre> <p>With the following characteristics:</p> <ol> <li>Both the left and the right columns have a fixed width.</li> <li>The content of C is fixed, so C has a fixed height.</li> <li>The amount of content in A and B can vary (the end user provides this), and therefore the required minimum height for A and B can vary.</li> <li>If A requires more height than B and C combined, then B's height should be stretched so that it keeps touching C, and C's bottom aligns with A's bottom.</li> <li>If A requires less height than B and C combined, then A should be stretched so that the bottom of A and C align.</li> <li>A and B have a distinct border and/or background color, so I can't cheat by not stretching one of them (and C doesn't need stretching).</li> </ol> <p>I tried doing this by representing each cell with a div and using jQuery's document ready event to adjust the cells to the appropriate heights, depending on which column is the tallest.<br> Most of the time, this works. However, because A contains an embedded YouTube video, and C contains an embedded Google Maps section, there is a lot of dynamic content adjusting going on, and this sometimes causes my javascript code to work with the wrong height values and mess up the layout process.<br> Also, it looks rather ugly when you see the content cells being stretched to their correct height, even though I could live with this if it worked consistently.</p> <p>As an alternative, I tried using a table for this layout, since they have the "keep all columns equally high" behaviour built-in.<br> The problem with this approach is that I have to use "td rowspan=2" for A, and once I do, IE and Chrome ignore any fixed height that I specify on C but instead makes C way too high.</p> <p>So basically I'm completely stuck on how to implement this (seemingly simple) layout. Can anyone point me in the right direction?</p> <p>I'm targetting Chrome, FireFox and IE7+, but in IE7 and IE8 a reasonable approximation of the desired layout is acceptable.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USAstrotrain
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POLayout with 2 variable-height columns
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POLayout with 2 variable-height columns
      1. This table or related slice is empty.
      1. VTUpMod
    1. COPlease post the code you've tried.
      singulars
      1. POLayout with 2 variable-height columns
      1. USj08691
    2. COflexbox, if you drop IE support (support the IE doesn't have deserved) ;-)
      singulars
      1. POLayout with 2 variable-height columns
      1. USbwoebi
 

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