From: Laura Greenwood <[EMAIL PROTECTED]>
>Now I've tried to make 4 divs in the middle so I can put different
>content in there.. and now the footer is not following my footer
>style, the image in the footer which should be placed on the far left
>bottom corner of the footing, is above it, and the footer is being
>swallowed up by the content div.
>
>here's what I have now:
>
>http://http://ciswebs.smc.edu/cis51/greenwood_laura_lee/temp_nov/index5.htm
>
>does anyone know what the heck I've done wrong.
By absolutely positioning those new blocks you put in the content section, you
took them "out of the flow" of the page. Nothing else will respect that they
are there, including the footer. So it moves up to fill the now "vacant" space
under the floated nav.
Here are a few suggestions to remedy this and get you started on a workable
solution. The selectors below are excerpted from your style sheet. Any
properties not shown in the below selectors should be removed (other selectors
can remain the same) -
#top {
margin: 0;
padding: 5px;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#leftnav {
float: left;
width: 160px;
margin: 0 0 0 11px;
background-color: #ddd;
display: inline;
}
#navcontainer li {
margin: 0 0 .2em 0;
padding: 0;
list-style-type: none;
}
#navcontainer a {
display: block;
color: #FFF;
background-color: #036;
margin: 0;
padding: .2em .8em;
text-decoration: none;
}
#content {
margin-left: 180px;
border-left: 1px solid gray;
padding: .5em;
max-width: 36em;
background-image: url("assets/blutextb.gif");
}
* html #content {height: 1%;} /* for IE7's sake, this height should be placed
in a conditional comment and have the * html part removed */
#blocka {
width: 48%;
float: left;
}
#blockb {
width: 48%;
float:right;
}
#blockc {
width: 48%;
float: left;
clear: both;
}
#blockd {
width: 48%;
float: right;
}
#active a {
display: block;
color: #FFF;
background-color: #600;
margin: 0;
padding: .2em .8em;
text-decoration: none;
}
I think that's everything I did. You have an extra closing bracket in your
style sheet following the #footer p selector.
I hope that helps,
~holly
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
