CSS dropshadow doesn't reach the bottom of the page? -


i wanted use dropshadow on both sides of main content it's not reaching bottom of page. cuts off looks 100 or px before end. haven't been able figure out why. appreciate help!

html file: http://db.tt/0z0cnvit stylesheet: http://db.tt/1cjdzbj0

html

<div id="container">     <div id="sidebar">         <img name="logo" src="" width="280" height="150" alt="" />         <br />         <br />babylon citizens council of arts not-for-profit arts organization bringing theatre, music, fine arts , cultural events residents of town of babylon.         <br />         <br />         <ul id="nav">             <li><a href="about.html">about</a>             </li>             <li><a href="events.html">events</a>             </li>             <li><a href="programs.html">programs</a>             </li>             <li><a href="comp.html">competitions</a>             </li>             <li><a href="photos.html">photos</a>             </li>             <li><a href="membership.html">membership</a>             </li>             <li><a href="contact.html">contact</a>             </li>         </ul>         <br />follow on social networks!         <br />         <br /> <a href="#"><img src="images/fb.png" /></a>  <a href="#"><img src="images/twitter.png" /></a>      </div>     <div class="content">          <h3>welcome babylon citizens council on arts!</h3>          <p><a href="#">link test</a>         </p>         <div id="slider">slider here</div>         <!-- end .content -->     </div>     <!-- end .container --> </div>

css

@charset"utf-8";  html, body {     height: 100%; } body {     font: 12px verdana, arial, helvetica, sans-serif;     line-height: 22px;     background: url(images/bg.png);     margin: 0;     padding: 0;     color: #666; } /* ~~ element/tag selectors ~~ */  ul, ol, dl {     /* due variations between browsers, it's best practices 0 padding , margin on lists. consistency, can either specify amounts want here, or on list items (li, dt, dd) contain. remember here cascade .nav list unless write more specific selector. */     padding: 0;     margin: 0; } h1, h2, h3, h4, h5, h6, p {     margin-top: 0;     /* removing top margin gets around issue margins can escape containing div. remaining bottom margin hold away elements follow. */     padding-right: 15px;     padding-left: 15px;     /* adding padding sides of elements within divs, instead of divs themselves, gets rid of box model math. nested div side padding can used alternate method. */ } img {     /* selector removes default blue border displayed in browsers around image when surrounded link */     border: none; } /* ~~ styling site's links must remain in order - including group of selectors create hover effect. ~~ */  a:link {     color: #42413c;     text-decoration: underline;     /* unless style links extremely unique, it's best provide underlines quick visual identification */ } a:visited {     color: #6e6c64;     text-decoration: underline; } a:hover, a:active, a:focus {     /* group of selectors give keyboard navigator same hover experience person using mouse. */     text-decoration: none; } /* ~~ fixed width container surrounds other elements ~~ */  #container {     width: 960px;     height: 100%;     background: #fff;     display: block;     margin: 0 auto;     /* auto value on sides, coupled width, centers layout */     -moz-box-shadow: 10px 0 5px -10px #cab7aa, -10px 0 5px -10px #cab7aa;     -webkit-box-shadow: 10px 0 5px -10px #cab7aa, -10px 0 5px -10px #cab7aa;     box-shadow: 10px 0 10px -10px #cab7aa, -10px 0 10px -10px #cab7aa;     /* ie 8 */     -ms-filter:"progid:dximagetransform.microsoft.shadow(strength=4, direction=135, color='#cab7aa')";     /* ie 5.5 - 7 */     filter: progid:dximagetransform.microsoft.shadow(strength=4, direction=135, color='#cab7aa'); } /* ~~ layout information. ~~   1) padding placed on top and/or bottom of div. elements within div have padding on sides. saves "box model math". keep in mind, if add side padding or border div itself, added width define create *total* width. may choose remove padding on element in div , place second div within no width , padding necessary design.  */  #sidebar {     width: 280px;     height: 100%;     float: left;     background-color: #f5e9e0;     padding: 40px; } #nav {     list-style-type: none;     line-height: 32px; } #nav a, #nav a:link, #nav a:visited, #nav a:active {     text-decoration: none;     border-bottom: 1px dotted #784e33;     display: block; } #nav a:hover {     text-decoration: none;     border-bottom: 1px dotted #784e33;     background-color: #fcf5f0; } .content {     width: 560px;     height: 100%;     float: right;     background-color: #fff;     padding: 40px 20px 40px 20px; } /* ~~ miscellaneous float/clear classes ~~ */  .fltrt {     /* class can used float element right in page. floated element must precede element should next on page. */     float: right;     margin-left: 8px; } .fltlft {     /* class can used float element left in page. floated element must precede element should next on page. */     float: left;     margin-right: 8px; } .clearfloat {     /* class can placed on <br /> or empty div final element following last floated div (within #container) if overflow:hidden on .container removed */     clear:both;     height:0;     font-size: 1px;     line-height: 0px; }

you need remove body , html height (100% uses browser height) , put clearing div before close container div.

clearing div: <div style="clear: both;"></div>

see here: http://jsfiddle.net/7mjmx/1/

thanks @allendar making original jsfiddle!


Comments

Post a Comment

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

running rails generate controller foo home results in: class foocontroller < application controller def home end end (there's nothing on line in actual file, blank line) is there purpose blank line? it's common use newline indicate end of line, last line. many editors (like vi, use) add in newline silently. consensus text files (especially in unix world) should end in newline, , there have been problems historically if wasn't present. why should text files end newline? the tool used count lines in file "wc" counts newlines in file, without trailing newline show 3 instead of 4. it improves readability of templates used in generator. consider: https://github.com/rails/rails/blob/master/railties/lib/rails/generators/rails/controller/templates/controller.rb to remove trailing newline, template have last line of: end<% end -%> instead of: end <% end -%> that seems less readable me. the discussion below refers ...
Read more

keyboard - Smiles and long press feature in Android -

i've created android keyboard. how add features inserting smilies, , using long keypresses display symbols? to create long-press behavior allows select several options pop-up menu, follow guide (specifically pop-up menu section): http://developer.android.com/guide/topics/ui/menus.html smileys (also known emoticons) combination of keys, understood programs , parsed same way. have do, when clicks smiley face on keyboard, simulate pressing of key combination matching emoticon. example, when clicks smiley, should simulate key presses ':' , ')' :). here's list of emoticons: http://en.wikipedia.org/wiki/list_of_emoticons
Read more

node.js - Bad Request - node js ajax post -

i'm using express 3.0 , node v0.11.0. have button submits form , i'm using ajax post data json object node server. client code is: $('#contact').submit(function(e) { console.log('submit called'); var formdata = json.stringify($('form').serializeobject()); console.log(formdata); $.ajax({ url: "http://localhost:3000/savedata/", type: "post", datatype: 'json', data: {objectdata: formdata}, contenttype: "application/json", complete: function() { console.log('process complete'); }, success: function(data) { console.log('process sucess'); }, error: function() { console.log('process error'); }, }); return false; }); then on server: var express = require('express'); var app = express(); app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.bodyparser());...
Read more