Databases
StackOverflow2013
Postsdbo
POPadding problems with sidebar/content/footer
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPadding problems with sidebar/content/footer
    text
    copied!<p>I'm having padding problems. My sidebar is 318px wide, my content is 642px wide, and my footer is 642px wide and lines up with my content. My sidebar and content <strong>both</strong> have a padding of 20px all around, but my sidebar is supposed to go full height to the bottom of the page and extend whenever there is more content which also pushes down the footer. I'm sorry if this is too much information but I'm trying to give as much detail as possible.</p> <p><a href="http://redsky.incredifull.com/" rel="nofollow">Here is a link to what I have so far</a> You can also view source if needed for the complete HTML. I only figured the elements I'm talking about are needed but that's for just in case there's more to it.</p> <p>HTML: </p> <pre><code>&lt;!-- SIDEBAR --&gt; &lt;div id="sidebar"&gt; &lt;h1&gt;Caul / Cbua&lt;/h1&gt; &lt;div class="sidetext"&gt; Lorem ipsumdolor sit amet, consectetur adipiscing elit. Nam laoreet mi c est dignissim, at auctor mi tristique. &lt;/div&gt; &lt;h1&gt;Commit&lt;/h1&gt; &lt;div class="sidelink"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- CONTENT --&gt; &lt;div id="content"&gt; &lt;h1&gt;News&lt;/h1&gt; &lt;div class="article"&gt; &lt;img class="articleimg" src="../../Slicing Images/news images/caul.png" width="84" height="65" alt="caul" /&gt; &lt;h2&gt;Lorem Ipsum&lt;/h2&gt; &lt;h3&gt;Friday, August 16th&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet...&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- FOOTER --&gt; &lt;div id="footer"&gt; &amp;copy; Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code> /* Sidebar */ #sidebar { background-color: #e7d9c9; background-image: url('/imgs/map.png'); background-repeat: no-repeat; /* height 100? */ width: 318px; float: left; padding-bottom: 20px; } .sidetext { padding: 5px 20px; font-size: 18px; font-family: Helvetica Neue; padding-bottom: 20px; } .sidelink { padding-bottom: 20px; margin: 0; padding: 0; width:300px; } .sidelink ul { margin: 0; padding: 0; margin-left: 20px; } .sidelink li { display: block; list-style: none; } .sidelink li a { display:block; font-family: Helvetica Neue; font-size:16px; color:#FFF; text-decoration:none; background-color:#1e416f; padding:5px; border-left:10px solid #FFF; padding-bottom: 20px; } .sidelink li a:hover { border-left:14px solid #1e416f; background-color:#e7d9c9; color: #1e416f; } h5 { font-family: Helvetica Neue: Light; font-size: 24px; color: #517f9c; } /* Content */ #content { width: 642px; float: right; } .article { padding: 5px 20px; } .articleimg { float: left; padding-right: 25px; } /* Footer */ #footer { font-family: Helvetica Neue: Regular; font-size: 12px; color: #94b9c4; clear: both; width: 100%; } </code></pre>
 

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