Databases
StackOverflow2013
Postsdbo
POThree Column DIV layout dynamics; left = fixed, center = fluid, right = fluid
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POThree Column DIV layout dynamics; left = fixed, center = fluid, right = fluid
    text
    copied!<p>The best solution I found so far was:</p> <p><a href="http://jsfiddle.net/kizu/UUzE9/" rel="nofollow noreferrer">http://jsfiddle.net/kizu/UUzE9/</a></p> <p>But that wasn't quite it. You see, I have three columns; two of which need to avoid being explicitly sized. Well, the second one does need to be sized; but not quite. </p> <p>Allow me to clarify by establishing the conditions I've been trying to meet. </p> <ul> <li>All three columns have fixed height: 65px, to be precise. </li> <li>The first column's width is set to 285px. </li> <li>The center column has no size defined; it simply takes up whatever space is left.</li> <li>The right column will size itself to whatever content is in there. There is no size explicitly set, it simply resizes based on content, leaving the center column to take up whatever space is left. </li> <li>There is no whitespace above, below, and in between each column. </li> </ul> <p>The end result would roughly look something like this:</p> <pre> Logo | Player | Name ----------------------------------------------------- </pre> <p>For tables, I'd have simply done this:</p> <pre><code>&lt;table width="100%" height="65px" cellspacing=0 cellpadding=0&gt; &lt;tr&gt; &lt;td width="285px" height="65px"&gt; Logo &lt;/td&gt; &lt;td height="65px"&gt; Player &lt;/td&gt; &lt;td width="1px" height="65px"&gt; Account &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>Result of above table code: <a href="http://jsfiddle.net/zMNYb/" rel="nofollow noreferrer">http://jsfiddle.net/zMNYb/</a></p> <p>But I'm trying to move away from using tables and using a DIV-based layout. Any ideas?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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