Databases
StackOverflow2013
Postsdbo
PODual Column Layout in CSS with dynamic height in IE
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODual Column Layout in CSS with dynamic height in IE
    primarykey
    data
    text
    <p>I have a dual column layout using CSS:</p> <pre><code>&lt;div id="nav"&gt;&lt;/div&gt; &lt;div id="left_column"&gt;&lt;/div&gt; &lt;div id="right_column"&gt;&lt;/div&gt; &lt;div id="footer"&gt;&lt;/div&gt; #left_column{ float: left; width: 463px; display: inline-block; margin-left: 12px; } #right_column{ float: right; width: 463px; display: inline-block; margin-right: 12px; } #footer{ clear:both; text-align: center; padding: 40px; } </code></pre> <p>This works fine in Firefox, but creates problems in IE. The main problem is that the content of these two columns is dynamic and never amounts to the same height with either column sometimes having a bigger height than the other. In IE, the left and right columns align with the bottom which creates a variable amount of space between the shorter column and the nav. What I would like is to have the columns align with the top/nav and then when an element is inserted with ajax at the top of the left_column, it just pushes the content in that column down and the two columns remained aligned at the top. I hope that made sense, any help is appreciated.</p> <p>...</p> <p>Using igoogle layout as an example, I have added the following css and it seems to be working:</p> <pre><code>&lt;div id="outside"&gt; &lt;div id="left_column"&gt;&lt;/div&gt; &lt;div id="right_column"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt;&lt;/div&gt; #outside{ display: block; float: none; margin: 0 0 1em; overflow: hidden; position: static; width: auto; } .column { display: block; width: 40%; float: left; margin-left: 0px; } </code></pre> <p>I have yet to fully implement it, but this seems to be aligning the columns with the top regardless of height and expands/contracts with the top as a reference point.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTenJack
    1. USTenJack
    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
    1. VO
      singulars
      1. PODual Column Layout in CSS with dynamic height in IE
      1. This table or related slice is empty.
      1. VTUpMod
    1. CODo you have an example online of what is currently happening?
      singulars
      1. PODual Column Layout in CSS with dynamic height in IE
      1. USalex
    2. COIn what version of IE? it seems to work fine on my IE8. It's worth pointing out that inline-block is not valid CSS, which might be causing problems.
      singulars
      1. PODual Column Layout in CSS with dynamic height in IE
      1. USfearofawhackplanet
    3. COinline-block is valid CSS2. It's not supported well in IE6/7 though.
      singulars
      1. PODual Column Layout in CSS with dynamic height in IE
      1. USalex
 

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