Databases
StackOverflow2013
Postsdbo
POborder-bottom not showing on header div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POborder-bottom not showing on header div
    text
    copied!<p>I'm trying to add a 1px border to the bottom of my header <code>div</code> but it isn't displaying. <br>Can anyone help?</p> <p>Is it something to do with me adding a specified <code>height</code> to the header <code>div</code>?<br> Or something to do with collapsing margins? Or both?!</p> <p>Here's what I have in the CSS...</p> <pre><code>@charset "UTF-8"; body { font: 100%/1.4; background-color:#FFF; margin: 0; padding: 0; color: #000; } /* ~~ Element/tag selectors ~~ */ ul, ol, dl { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; padding-right: 15px; padding-left: 15px; } h1 { font-family: 'Abel', Arial, sans-serif; font-size:24px; } h2 { font-family: 'Abel', Arial, sans-serif; font-size:18px; } p { font-family: 'Cutive Mono', Georgia, serif; font-size:14px; } #home #homelink, #aboutus #aboutuslink, #ourwork #ourworklink, #contactus #contactuslink { font-family: 'Abel', Arial, sans-serif; color: #494949; font-size:17px; text-decoration:none; } #mainNav { margin: 0; padding: 0; list-style: none; } #mainNav li { float: left; padding: 40px 20px 0 20px; } #mainNav li:first-child { border-left: 0px; padding-left: 0px; } #mainNav a { font-family: 'Abel', Arial, sans-serif; color: #666; font-size:17px; text-decoration:none; padding: 0 20px 0 20px; } #mainNav a:hover { color:#FFF; background-color: #494949; } a img { border: none; } a:link { color: #42413C; text-decoration: underline; } a:visited { color: #6E6C64; text-decoration: underline; } a:hover, a:active, a:focus { text-decoration: none; } .container { width: 1352px; background-image:url(Images/sktchbook-bgd.jpg); background-repeat:no-repeat; margin: 0 auto; } .header { width: 780px; height: 82px; margin-left:90px; margin-right: 90px; border-bottom: 1px #494949; } .sidebar-logo { float: left; width: 70px; } .subcontainer { width: 980px; min-height: 880px; margin: 0 auto; } .content { padding: 10px 0; margin-left:90px; margin-right:90px; } .fltrt { float: right; margin-left: 8px; } .fltlft { float: left; margin-right: 8px; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } </code></pre> <p>and the HTML...</p> <pre><code>&lt;body&gt; &lt;div class="container"&gt; &lt;div class="subcontainer"&gt; &lt;div class="header"&gt; &lt;div id="mainNav"&gt; &lt;ul id="mainNav"&gt; &lt;li class="firstitem"&gt;&lt;a href="#" id="home" target="_self"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" id="aboutus" target="_self"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" id="ourwork" target="_self"&gt;Our Work &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" id="flashlink" target="_self"&gt;Contact Us &lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="sidebar-logo"&gt;&lt;img src="Images/k-blondel-design-logo.png" width="64" height="108" alt="K Blondel Design logo" /&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;h1&gt;Instructions &lt;/h1&gt; &lt;p&gt;At K Blondel Design we aim to fill the gap between the over exuberant furniture maker and the general carpenter. Trained in the art of creating affordable and elegant solutions to 3D problems.&lt;/p&gt; &lt;p&gt;As a small business we are able to deliver a personal one to one design service, talking through various design and material possibilities and arriving at an affordable, bespoke and stylish solution.&lt;/p&gt; &lt;p&gt;From design through to construction and installation we specialise in storage solutions, furniture and interiors for both the domestic and commercial markets. &lt;/p&gt; &lt;p&gt;We have 20 years' design and commercial experience and an ever-growing client list spanning Sussex, Hampshire, London and Kent.&lt;/p&gt; &lt;!-- end .content --&gt;&lt;/div&gt; &lt;!-- end .subcontainer --&gt;&lt;/div&gt; &lt;!-- end .container --&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </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