Databases
StackOverflow2013
Postsdbo
PORight-floated sidebar with main content flowed around - how?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORight-floated sidebar with main content flowed around - how?
    primarykey
    data
    text
    <p>I'd like to create a webpage layout with the sidebar to the right and the main content flowing around the sidebar.</p> <p>Requirements:</p> <ol> <li>Content below the sidebar should occupy all of the available width</li> <li>Content below the sidebar should not wrap when it hits the left of the sidebar</li> <li>Main content should <em>precede</em> the sidebar in the markup</li> <li>Sidebar has fixed width but unknown/variable height</li> <li>CSS-only - no JavaScript solutions</li> </ol> <p>This could be achieved without the third requirement: if the sidebar is before the main content in the markup and is within the same containing element, a simple right float does the job. A sidebar before the main content in the markup is not an option here. The sidebar will contain supplemental information and adverts. If this is before the main content in the markup it will be annoying to CSSless browsers and screenreader users (even with 'skip to ...' links).</p> <p>This could be achieved without the fourth requirement. If the sidebar had a fixed height I could put a containing element before the main content, float it right and give it a suitable width and height and then use absolute positioning to put the sidebar on top of the pre-made space.</p> <p>Example markup (without CSS, relevant bits only):</p> <pre><code>&lt;body&gt; &lt;div id="content"&gt; &lt;p&gt; Lorem ipsum .... &lt;/p&gt; &lt;p&gt; Pellentesque .... &lt;/p&gt; &lt;div id="sidebar"&gt; /* has some form of fixed width */ &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>Example layout:</p> <p><a href="http://webignition.net/images/layoutexample.png">alt text http://webignition.net/images/layoutexample.png</a></p> <p>I'm not sure if this is possible. I'm happy to accept an authoritative answer stating that this cannot be achieved. If this can't be achieved I'd appreciate an explanation - knowing why it can't be achieved is much more valuable than just being told it can't.</p> <p><strong>Update</strong>: I'm happy to see answers that don't meet all of the five requirements, so long as an answer states which requirement is being ignored plus the consequences (pros and cons) of ignoring the requirement. I can then make an informed compromise.</p> <p><strong>Update 2</strong>: I can't ignore requirement 3 - the sidebar cannot precede the content.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJon Cram
    1. USJon Cram
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    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. PORight-floated sidebar with main content flowed around - how?
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. PORight-floated sidebar with main content flowed around - how?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PORight-floated sidebar with main content flowed around - how?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

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