Databases
StackOverflow2013
Postsdbo
POCSS 100% - 200px?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS 100% - 200px?
    text
    copied!<p>I'm trying to use <code>&lt;div&gt;</code> objects and CSS to emulate the appearance of frames for a project that I'm working on. Using the following code I was able to properly stretch the list on the left with a <code>border-right</code>, <code>padding</code>, and (if I choose) a <code>background</code> using only one extra element:</p> <p>HTML:</p> <pre><code>&lt;div id="sidebar"&gt; &lt;div id="sidebar-content"&gt; &lt;!-- content goes here --&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;!-- more content --&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>html, body { height: 100%; margin: 0; padding: 0; } #sidebar { float: left; height: 100%; width: 200px; overflow: auto; border-right: solid 1px #000; } #sidebar-content { margin: 10px; padding: 0; list-style: none; } #content { position: relative; float: left; padding: 10px; } </code></pre> <p>This worked well until I tried adding another element at the top of the content which stretched horizontally. Here's the current code:</p> <p>HTML:</p> <pre><code>&lt;div id="content"&gt; &lt;div id="criteria"&gt; &lt;!-- select boxes --&gt; &lt;/div&gt; &lt;!-- other content --&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#criteria { position: absolute; left: 0; right: 0; background: #FF9; } </code></pre> <p>This picture shows the results</p> <p><img src="https://i.stack.imgur.com/FKzhy.jpg" alt="Results of the above CSS and HTML"></p> <p>I tried adding the following rule:</p> <pre><code>#content { width: 100%; } </code></pre> <p>although this stretched the <code>#content</code> div to the width of the body element, not the body minus the sidebar - so the content appeared below the fold (and beneath the sidebar on the left)</p> <p>How can I use CSS to stretch the criteria box to fill the content area horizontally?</p> <p>EDIT -</p> <p>I wanted to upload a picture of what happened after Karl's recommendation:</p> <blockquote> <p>Remove the <code>float: left</code> from <code>#content</code>. If there is a floated element next to a normal block element, the block element will fill the remaining space. Also don't set the width attribute.</p> </blockquote> <p>Here's what happened when <code>float: left</code> was removed</p> <p><img src="https://i.stack.imgur.com/t0vAu.jpg" alt="Results of the above recommended fix"></p> <p>Close, however now the <code>#criteria</code> is stretching to cover up the sidebar. Other suggestions?</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