Databases
StackOverflow2013
Postsdbo
POFluid layout with optional sideboxes
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFluid layout with optional sideboxes
    primarykey
    data
    text
    <p>I want a layout with three boxes (two optional) like this:</p> <p>[side box 1] [ main content</p> <p>[side box 2] . main content ]</p> <p>or</p> <p>[ main content spans 100% if side boxes aren't provided ]</p> <p>I want the main content box to span the entire height and width available in <code>#load</code> (minus margins) except if the side boxes are there, then I want it to only span up until those boxes (and their right margin).</p> <p>My CSS:</p> <pre><code>#load { margin: 10px; height: 100%; min-width: 1080px; } #primary,#secondaryOne,#secondaryTwo { border-radius: 8px; background: #f5f5f5; border: 1px solid #ccc; } #primary { float: right; height: inherit; width: 75%; height:500px; background:red; } #secondaryOne,#secondaryTwo { min-width: 250px; max-width: 300px; height: 220px; margin-right: 10px; width: 20%; clear:left; float:left; } #secondaryTwo { margin-top: 10px; } </code></pre> <p>Simple HTML</p> <pre><code>&lt;div id='load'&gt; &lt;div id='primary'&gt;&lt;/div&gt; &lt;div id='secondaryOne'&gt;&lt;/div&gt; &lt;div id='secondaryTwo'&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p><a href="http://jsfiddle.net/v4cvv/56/" rel="nofollow">JSFiddle</a></p> <h2>Problems</h2> <ol> <li><p>*<em>SOLVED</em>*Making #primary span the entire width if the sideboxes are missing.</p></li> <li><p>*<em>SOLVED</em>*Is there a way to line the two sideboxes (#secondaryOne,#secondaryTwo) on the left side of #primary without nesting them in a separate div? If I use float: left on them, they line side by side, if I don't float them, the #primary generates below them, not beside them.</p></li> </ol> <h2>Solutions</h2> <ol> <li>Problem #1 was solved by joeytje50 using the secondary + primary tags and placing the secondary side boxes before the primary in HTML.</li> <li>Problem #2 was solved in more than one way. The way I chose so that the secondary tags were placed together and before the primary was by NoobEditor using <code>clear: left</code> and a negative <code>margin-top</code>.</li> </ol> <p>The solution can be found at: <a href="http://jsfiddle.net/v4cvv/67/" rel="nofollow">http://jsfiddle.net/v4cvv/67/</a></p> <p>The main part of the solution is:</p> <pre><code>#primary { width: 100%; } #secondaryOne + #primary, #secondaryTwo + #primary { margin-top: -221px; width: 75%; } </code></pre> <h2>Alternate Solution</h2> <p>One problem I found with the above solution, is it requires the two boxes and them to be the same height. A solution around this is by grouping the boxes in their own div. This solution is:</p> <p><strong>HTML</strong></p> <pre><code>&lt;div id='load'&gt; &lt;div id="sideboxes"&gt; &lt;div id="boxOne" class="box"&gt;&lt;/div&gt; &lt;div id="boxTwo" class="box"&gt;&lt;/div&gt; &lt;div id="boxThree" class="box"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="primary" class="box"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>.box { border-radius: 8px; background: #f5f5f5; border: 1px solid #fff; } #primary { float: right; display:block; height: 97%; width: 100%; } #sideboxes + #primary { width: 75%; } #sideboxes { float: left; height: 97%; width: 23%; margin-right: 10px; } #sideboxes .box { float: left; height: 220px; margin-bottom: 10px; width: 100%; } </code></pre> <p>The alternate solution no longer requires clear and can be extended for other uses. You may now also have 1, 2, 3, or however many boxes you want in the sideboxes div.</p> <p>Thanks all for their help.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDevon
    1. USDevon
    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
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POFluid layout with optional sideboxes
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POFluid layout with optional sideboxes
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POFluid layout with optional sideboxes
      1. This table or related slice is empty.
      1. VTUpMod
    1. COdid you try float all to left? Floating only primary make the others stay below, on same space
      singulars
      1. POFluid layout with optional sideboxes
      1. UScox
    2. COThanks for the advice, however, if I float left on all of them, then it shows up with the two sideboxes on top and the primary below them.
      singulars
      1. POFluid layout with optional sideboxes
      1. USDevon
 

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