Faux Column I need Help

blktallos Active Member

Messages:: 314

Likes Received:: 3

Best Answers:: 0

Trophy Points:: 60

#1

http://blakeanthonydesign.com/testpage.html

Here is a live link of my Layout.

Do you see th gap between the footer and the left sidebar ?
I need that to be down more so it touches the footer.
How can i make the sidebar touch my footer and keep putting text in the div?
I need that green color to be down More and to touch my footer.
Can someone help me on this?

here is my Html and css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>The Lycanthrope HTML/CSS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="imagetoolbar" content="no">
<meta name="description" content="A brief description of the current page goes here.">
<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished">


<style type="text/css" media="screen,projection">

/* My take on the CSS Reset */
a, abbr, acronym, address, area, b, bdo, big, blockquote, body, button, caption, cite,
code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4,
h5, h6, hr, html, i, img, ins, kbd, label, legend, li, map, object, ol, p, param, pre,
q, samp, small, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead,
tr, tt, ul, var {
margin: 0;
padding: 0;
vertical-align: baseline;
}

abbr, acronym {
border-bottom: 2px dotted #666; /* IE can't handle a 1px dotted border on a single side */
}

blockquote, q { /* removes any generated quotation marks from blockquote and Q elements */
font-style: italic;
quotes: "" "";
}
blockquote:before, blockquote:after, q:before, q:after {
content: ""; /* removes any generated content from before and after blockquote and Q elements */
}

body {
background: #FFF;
color: #000;
/* the font "Lucida Console" is included for development only - remove it when you're finished, but don't change anything else */
font: 85%/1.5 "lucida console", tahoma, verdana, arial, helvetica, sans-serif;
letter-spacing: 1px;
}

code, pre {
white-space: pre;
}

del {
text-decoration: line-through; /* it's deleted text - show it */
}

dfn {
font-style: italic;
font-weight: bold;
}

em {
font-style: italic;
}

fieldset {
border: 0;
display: inline; /* this squashes an IE bug */
}

h1, h2, h3, h4, h5, h6 {
font-family: georgia, garamond, "times new roman", times, serif;
font-weight: bold;
}

h1 {
font-size: 1.5em;
font-weight: normal;
line-height: 1.8em;
}

h2 {
font-size: 1.25em;
}

h3 {
font-size: 1em;
}

h4 {
font-size: 0.95em;
}

h5 {
font-size: 0.85em;
}

h6 {
font-size: 0.75em;
}

img {
border: 0; /* this squashes a Firefox bug */
vertical-align: bottom; /* this squashes an IE bug */
}

ins {
text-decoration: none;
}

strong {
font-weight: bold;
}

table {
border: 0;
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
font-weight: 400;
text-align: left;
}

tt {
display: block;
margin: 1.5em 0;
}

/* there, now the defaults we NEED to reset have beeon replaced with what we want; now on to the rest of the site */

#container {

background:#D6D6BC none repeat scroll 0% 0%;
margin: 0 auto;
width: 750px;
}
#header {
background: #003567;
color: inherit;
height: 80px; /* fixes a Firefox (Gecko) bug that collapses the image if it's not rendered */
}

#menu {
background: #DCE;
float: left;
width: 180px;
}
#menu li {
list-style: none;
}
#menu li a {
display: block;
height: 1%;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
}

#menu li a:hover {
background: #FC9;
color: #000;
}

#content {
margin: 0 0 0 180px;
position: relative;
}
#content .wrapper {
background: #d6d6bc;
float: right;
min-height: 30em;
width: 100%;
}

* html #content .wrapper {
height: 30em;
}

#ad-bar, #sidebar {
float: left;
width: 180px;
}

#ad-bar {
background: #AC6;
color: inherit;
height: 150px;
overflow: hidden;
text-align: center;
}

#sidebar {
background: #CED;
color: inherit;
}

#footer {
background: #f8f8ef;
clear: both;
color: FFF;
height: 1%;
padding: 0.5em;
text-align: center;
}
#footer em {
display: block;
font-style: normal;
}

/* #container {
background: #d6d6bc;
margin: 0 auto;
width: 750px;

}
#header {
background: #EEE;
}

#menu {
background: #fff;
height: 2em;
line-height: 2em;
}
#menu li {
display: inline;
white-space: nowrap;
}

#menu a {
background: #f3f3f3;
color: #FFF;
float: left;
height: 2em;
margin: 0 0 0 2px;
padding: 0 0.25em;
text-decoration: none;
}

#content {
margin: 0 256px 0 0;
position: relative;
}
#content .wrapper {
background: #CDE;
float: left;
min-height: 20em;
width: 100%;
}

* html #content .wrapper {
height: 20em;
}

#ad-bar {
float: right;
width: 256px;

}

#sidebar {
background: #FFF;
float: right;
width: 256px;
}

#footer {
background: #DEF;
clear: both;
height: 1%;
padding: 0.5em;
}
#footer em {
display: block;
font-style: normal;
} */

</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://i28.tinypic.com/anexqt.jpg" width="300" height="100" alt="Logo" title="">
</div>

<ul id="menu">
<li><a href="http://blakeanthonydesign.com/index.html">Home</a></li>
<li><a href="http://blakeanthonydesign.com/about.html">Who I Am</a></li>
<li><a href="http://blakeanthonydesign.com/services">What I Do</a></li>
<li><a href="http://blakeanthonydesign.com/portfolio">Portfolio</a></li>
<li><a href="http://blakeanthonydesign.com/MyWriting">My Writing</a></li>

<li><a href="#">Menu Link</a></li>
</ul>
<div id="content">
<div class="wrapper">
<h1>Web Development</h1>
<p>
Blake Tallos is a 19-year old freelance Web developer living and working in Cuyahoga Falls, Ohio. He specializes in creating accessible, easy to use Web sites using the bare minimum of clean, semantic and valid XHTML and CSS. Blake Tallos is also a User at the SitePoint Forums, a community of leading development professionals and enthusiasts.
</p>

<blockquote>
<hr>
</blockquote>
<h2>Why should You Hire Me?</h2>
<p>
For starters, aside from the summary I provided above, I dont write in the third person. Im not here to pretend to be someone Im not. Unlike some other people who try to impress their prospective clients with a lot of bells and whistles, I stick to the fundamentals and just get straight to the point. Here are a few of the things I have to offer
</p>
<hr>

<h2>4 Years of Experience</h2>

<p>
I draw upon a wide variety of skills, including but not limited to accessibility, information architecture, clean minimal semantic and valid (X)HTML/CSS hand coded markup, usability to help ensure that every site I develop is easy to find, easy to access and easy to use. These sites are then in turn able to achieve higher search engine rankings, direct more qualified traffic thereby lowering bounce rates, and easily convert that traffic into increased sales, registrations, better-informed readers, or whatever else the Web site was created to do.
</p>
<hr>
<h2>Professional Service</h2>
<p>

From the moment you contact me, I'll work with you to determine how you can improve and optimize your existing Web site, or if you don't have one, the needs of the site you want to have developed. Rather than having an agency or studio assign a junior designer or an inexperienced consultant to an account number, I'll use my unique project requirement gathering process to determine your target audience, message, and goals to ensure that your site not only meets but exceeds your company's needs and objectives. I'm also accessible via e-mail, instant message, and phone as well, and if need be can meet you at your place of business (face-to-face meetings are available to local clients only).
</p>

</div>
</div>
<div id="ad-bar">
(Ads go here)
</div>
<div id="sidebar">
<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla
auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut,
lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue
ligula, eget pellentesque turpis augue quis diam. Nulla facilisi.
</p>

</div>
<div id="footer">
<em>
Copyright Â© 2006-2008, The Monster Under the Bed. All Rights to Scare
Unsuspecting Children Reserved.
</em>
</div>

</div>

</body>

</html>
Click to expand...