moorbilliom1
New Member
I'm currently styling a website using responsive web design technique so that it could also look decent when accessed from handheld devices. I have used Bootstrap for positioning the elements and some custom css for styling the nav-bar, footer, etc.Most of the elements include the nav-bar work fine except the fact that my footer keeps overlapping the other elements when shrink the web-page vertically. Have a look at the code below. Any help would be greatly appreciated. thanks.\[code\]html{ margin: 1%; padding: 0;}html, body{ height: 95%;}#body{ height: 82%;}header, footer, nav, section{ display: block;}footer{ width: 100%; list-style: inline-block; position: static; white-space: nowrap; border-radius: 4px; padding-top: 2px; padding-left: 5px; vertical-align: baseline;}footer p{ padding: 0.2em; color: White;}#image{ padding: 0.2em;}.nav{ position: relative; margin: 20px 0; width: 100%; border-radius: 4px;}.nav ul{ margin: 0; padding: 0;}.nav li{ margin: 10px 5px 10px 0; padding: 0; display: inline-block; list-style: none;}.nav a{ padding: 3px 12px; text-decoration: none; color: white; line-height: 100%;}.nav a:hover{ border: 1px solid #acdd4a; font-weight: normal; color: #ffffff; text-decoration: none;}.nav a:active{ border: 1px solid #acdd4a; font-weight: normal; color: #ffffff;}.nav .current a{ border: 1px solid #acdd4a; color: #fff; border-radius: 5px;}\[/code\]Below is my Markup\[code\]<!DOCTYPE html><html lang="en"><head> </head><body> <header> <div class="row-fluid"> <div class="span2"> <p> Title of webpage </p> </div> <div class="span8"> </div> <div id="image" class="span2"> </div> </div> </header> <nav class="nav"> <ul> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li><a href="http://stackoverflow.com/questions/15635613/#">Admin</a></li> <li>@Html.ActionLink("Help", "Contact", "Home")</li> </ul> </nav> <div class="row-fluid" id="body"> <section> @RenderBody() </section> </div> <footer> <div class="row-fluid"> <div class="span4"> <p>@User.Identity.Name</p> </div> <div class="span5"> </div> <div class="span3"> <p> © @DateTime.Now.Year</p> </div> </div> </footer> </body></html>\[/code\]