Databases
StackOverflow2013
Postsdbo
POCSS Positioning - Two Column Div Layout with Two fixed top DIVs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Positioning - Two Column Div Layout with Two fixed top DIVs
    text
    copied!<p>I am attempting to put together a webpage layout with the following elements: 1. A two column setup with menu on the left and main content on the right. 2. A "function bar" fixed to the top of the right column. Fixed and always visible.</p> <p>Here are the catches:</p> <ol> <li>I want the two columns to scroll independently of each other if their height pushes past the browser window resolution</li> <li>The Content Managment System I use adds a fixed pane to the top of the page to show control options</li> </ol> <p>I have crafted an image that gives a visual representation of the layout I am after. I hope it helps this make sense.</p> <p><a href="http://www.yandasmusic.com/Portals/1/Images/new-layout-image.png" rel="nofollow">Image of layout for reference</a></p> <p>Here's where I'm at currently in attempting to create this layout</p> <pre><code>&lt;div class="CMS-Admin-Bar"&gt;&lt;/div&gt; &lt;div class="total-wrapper"&gt; &lt;div class="left-pane"&gt; &lt;div class="menu-pane"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="right-pane"&gt; &lt;div class="Function-Pane"&gt;&lt;/div&gt; &lt;div class="Content-Pane"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; .CMS-Admin-Bar{ position:fixed; height:43px; left:0; top:0; width:100%; z-index:10; } .total-wrapper{ position:relative; } .left-pane{ position:absolute; top:0; bottom:0; left:0; height:100%; width:283px; z-index:8; } .right-pane{ position:fixed; top:0; left:283px; right:0; bottom:0; overflow:auto; } .Function-Pane{ position:fixed; z-index:8; top:0px; left:283px; height:43px; } </code></pre> <p>With this CSS I have a few problems:</p> <ol> <li>The "CMS-Admin-Bar" covers my "Function-Pane" when an admin is logged in.</li> <li>The "Function-Pane"'s right 283px is being cut off. I need this fixed div to fit in the screen, while still having a fluid width.</li> </ol> <p>I hope I was descriptive enough. Thanks for your help and time!</p> <p>Alex</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