Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS - Fill Page (horzonal) with div
    primarykey
    data
    text
    <p>I am building a website in which the main content frame should span the entire width of the page, and as much height as necessary, with a minimum height (in order to contain a floating "sidebar" of sorts). However, setting the width of the div element to 100% doesn't fill the window, it over-fills it, creating a horizontal scroll-bar. Is there any way to have the content div stretch to the full width of the page and no more, without clipping from the sides or bottom, as with box sizing or overflow settings?</p> <p>Thank you for your time, Timothy S. <br/> base.css</p> <pre><code>html, body { margin:0; padding:0; font-family: "Lucida Grande", Verdana; font-size: 0.9em; background-color:#4D714D; background-image:url("images/titlebar.png"); background-attachment:fixed; background-repeat:no-repeat; background-position:0px 7px; } div.content { position:relative; top: 150px; padding: 20px; margin-left: auto; margin-right: auto; width:100%; min-height:500px; background-color:#8BB88B; } div.sidebar { float:right; position:relative; top:-20px; left:20px; width: 400px; height: 400px; background-color:#FFFFFF; } </code></pre> <p><br/> example page</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Login&lt;/title&gt; &lt;link type="text/css" href="base.css" rel="stylesheet" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="content"&gt; &lt;div class="sidebar"&gt;&lt;/div&gt; &lt;form action="loginScript.php" method="post"&gt; &lt;label&gt;Username:&lt;/label&gt; &lt;input type="text" name="username" /&gt; &lt;br /&gt; &lt;label&gt;Password:&lt;/label&gt; &lt;input type="password" name="password" /&gt; &lt;br /&gt; &lt;input type="submit" value="Login" name="login" /&gt; &lt;/form&gt; &lt;?php print($_GET['msg']) ?&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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