View Full Version : Vertical Borders to flow 100% of the website.

05-17-2012, 08:09 PM
Hey guys, i have the following html and css, i have managed to make a sticky footer. However i would like to have the right and left border for <div id="content"> to flow from the bottom of the navbar to the top of the footer, so it looks like there is two lines where all of the content of the site goes in. Would be great if someone could help me with this :D


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<link rel="stylesheet" type="text/css" href="main.css" />
<title>DJS Interior Services - Services</title>


<div id="wrapper">
<div id="hdr">
<img src="images/hdr_logo.png" alt="DJS Interior Services"/>
</div><!-- end of #hdr -->
<div id="navbarcontainer">
<div id="navbarcontainer2">
<div id="navbar">
<li><a class="nm" href="#"><img src="images/btn_services.png" alt="Services"/></a></li>
<li><a class="nm" href="ourwork.html"><img src="images/btn_ourwork.png" alt="Ourwork"/></a></li>
<li><a class="nm" href="suppliers.html"><img src="images/btn_suppliers.png" alt="Suppliers"/></a></li>
<li><a class="nm" href="feedback.html"><img src="images/btn_thankyous.png" alt="Thank You's"/></a></li>
<li><a href="contactus.html"><img src="images/btn_contactus.png" alt="Contact Us"/></a></li>
</div><!-- end of #navbar -->
</div><!-- end of #navbarcontainer2 -->
</div><!-- end of #navbarcontainer -->

<div id="border">
<div id="content">
</div><!-- end of #content -->
<div id="push"></div>
</div><!-- end of #border -->
</div><!-- end of #wrapper -->

<div id="footer">
<p id="myoutercontainer2">DJS Interior Services would like to thank you for viewing our site. Please contact us if you have any questions.</p>
</div><!-- end of #footer -->




* {margin: 0;}

html, body {height:100%;}

body {background-color:#ffffff;}

#hdr {height:96px; background-image:url("images/hdr_bg.jpg");}

#navbarcontainer {height:30px;background-color:#00038e;}

#navbarcontainer2 {width:548px; margin:0 auto;}

#navbar {height:40px; display:table-cell; vertical-align:middle; text-align:center;}

#navbar ul {list-style-type:none; margin:0 auto; padding:0;}

#navbar li {display:inline; margin-right:30px;}

#wrapper {width:800px; margin:0 auto; min-height:100%; height:auto !important; height:100%; margin:0 auto -30px; }

#content {}

#border {border-style:none solid; border-color:#656565; height:100%;}

#footer, #push {width: 800px; height:30px;}

#myoutercontainer2 { line-height:22pt }
#footer {margin:0 auto; background-color:#656565;}
#footer p {color:#ffffff; text-align:center; font-family:"Times New Roman", Times, Serif; font-style:italic; font-size:11pt;}

Thanks, Sam.