Databases
StackOverflow2013
Postsdbo
PORedesign Table (dynamic width) with Div tags
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORedesign Table (dynamic width) with Div tags
    text
    copied!<p>I want to display a html page, with a classic design. Header, footer, content and bar to the right.</p> <p>For some reason I don't like the fixed width of the content. On a wide screen you should be able to resize your page, so it fills the screen, or make it very small to display two pages side by side.</p> <p>I also would like to use div tags instead of a table layout. Using the div tags gives me the following advantages (I'm being told):</p> <ul> <li>Content can be rendered while waiting for the "right" bar</li> <li>On a mobile phone, the Div tags can be shown under each other, instead of side by side.</li> </ul> <p>My test/debug html looks like this:</p> <pre><code>&lt;!-- Create content with DIV tags --&gt; &lt;div id="head" style="background-color:aqua"&gt;This is the header&lt;/div&gt; &lt;div id="body" style="float:left;"&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. &lt;/p&gt; &lt;/div&gt; &lt;div id="right" style="background-color:orange; float:right; width:10em;"&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt; &lt;/div&gt; &lt;div id="tail" style="background-color:lime;clear:both;"&gt;This is the Footer&lt;/div&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;!-- Create content with TABLE tag --&gt; &lt;div id="t-head" style="background-color:aqua"&gt;This is the header&lt;/div&gt; &lt;table cellpadding="0" cellspacing="0"&gt; &lt;tr&gt;&lt;td&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. &lt;/p&gt; &lt;/td&gt;&lt;td valign="top" style="background-color:orange; width:10em;"&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;div id="t-tail" style="background-color:lime;clear:both;"&gt;This is the Footer&lt;/div&gt; </code></pre> <p>Output of this code is here:</p> <p><a href="http://www.vantslot.be/images/StackOverflow/Example-TableDiv.png" rel="nofollow noreferrer">Div vs Tables http://www.vantslot.be/images/StackOverflow/Example-TableDiv.png</a></p> <p>(Text does not matter, only the layout, so I have shrunken it a bit).</p> <p>The top layout is using the divs : <strong>wrong</strong></p> <p>Bottom layout is using the table : <strong>good</strong></p> <h2>My question / problem</h2> <p>How can I position the "right" bar, on the right of the content, while maintaining the dynamic width of the content, and not using table layout?</p> <p>What I actually want is the right pane appear on the right of the content, but when the browser is too small (&lt; 20em), it can be displayed under it. This is not possible with tables, so I prefer a div solution.</p> <p>In the final Website the contents of the header / footer / content and right will be dynamically generated, so I cannot hardcode the height.</p> <h2>Edit</h2> <p>Thx for all the answers, this really helps me forward.</p> <p>I see what is "wrong" here. I have put the <em>right</em> pane after the <em>content</em> pane. If I put the right pane before the content pane, it renders correctly (after adding a margin-right to the content). </p> <p>This is a bit illogical for flow of the html. Since the content is more important as the content in the right pane, I would like it to be send to the client before the right pane.</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