Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is one way of doing it.</p> <p>I made a slight modification to your HTML by adding a <code>.main-wrap</code> to wrap the floats.</p> <pre><code>&lt;div id="page-wrapper"&gt; &lt;div id="header"&gt;0&lt;/div&gt; &lt;div id="main-wrap"&gt; &lt;div id="left_sidebar"&gt;1&lt;/div&gt;&lt;!--end left_sidebar --&gt; &lt;div id="main_contents"&gt;2&lt;/div&gt; &lt;div id="right_sidebar"&gt;3&lt;/div&gt;&lt;!--end right_sidebar --&gt; &lt;/div&gt;&lt;!-- end main-wrap --&gt; &lt;div id="footer-wrapper"&gt;4&lt;/div&gt;&lt;!-- end footer --&gt; &lt;/div&gt;&lt;!--close page-wrapper--&gt; </code></pre> <p>and here is the CSS:</p> <pre class="lang-css prettyprint-override"><code>html, body { height: 100%; } body { margin: 0; } #page-wrapper { height: 100%; min-height: 300px; /* optional */ width: 800px; margin: 0 auto; position: relative; } #header { position: relative; top: 5px; height: 100px; background-color: pink; } #main-wrap { position: absolute; left: 0; right: 0; top: 105px; bottom: 100px; background-color: yellow; } #left_sidebar { float: left; width: 20%; height: 100%; background-color: green; } #main_contents { float: left; width: 55%; height: 100%; margin-left: 20px; margin-right: 20px; background-color: red; } #right_sidebar { float: left; width: 20%; height: 100%; background-color: lightblue; } #footer-wrapper { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; background-color: #d8d8d6; } </code></pre> <p>See demo fiddle at: <a href="http://jsfiddle.net/audetwebdesign/xMNUv/" rel="nofollow">http://jsfiddle.net/audetwebdesign/xMNUv/</a></p> <p>The trick is to extend the <code>#page-wrapper</code> to the full height of the view port. Set the top and bottom margin to zero to prevent vertical scrolling.</p> <p>The <code>#header</code> and <code>#footer-wrapper</code> are both 100px in height, so you can now use absolute positioning to stretch the <code>main-wrap</code> to fill up the space between the header and footer elements.</p> <p>You can use <code>position: relative</code> on the header to open up some white space on top if you need it.</p> <p>Within the <code>#main-wrap</code>, you can now float your sidebars and content elements to form a 3-column layout. Apply <code>height: 100%</code> to get the floated elements to fill up the <code>#main-wrap</code> height.</p> <p>You may want to add a minimum height value to <code>#page-wrapper</code> to prevent the columns from collapsing.</p> <p>Depending on your content, your floated columns may overflow since their height is constrained by the height of the view port. You may want to add <code>overflow: auto</code> to the floated elements as needed.</p>
    singulars
    1. This table or related slice is empty.
    1. POCannot fix height 100% of parent using floated elements inside
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USMarc Audet
    1. USMarc Audet
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POCannot fix height 100% of parent using floated elements inside
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThat s cool Mark but when i try to add some text in main comtents div it does not extend..any solution to that..?
      singulars
      1. PO
      1. USJohn
    2. COThe design you requested will not extend since you wanted the header, floated columns and footer to fit within the 100% view port. If you want the design to extend beyond the view port, you need to allow the `#page-wrapper` height to be auto, and decide what to do about the footer. Alternatively, you can set `overflow: scroll` or `overflow: auto` on `.main-wrap`, but then you need to adjust the width of your floated elements to deal with the width of the scroll bar. You will also need to rethink about how the heights of the floated columns adjust themselves when you start to add content.
      singulars
      1. PO
      1. USMarc Audet
 

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