3 replies [Last post]
Korak
Offline
newbie
Irvine, CA
Last seen: 14 years 49 weeks ago
Irvine, CA
Joined: 2007-08-17
Posts: 6
Points: 0

Hi all. I'm stuck! The experiment page can be seen at http://flowers.aremyfix.com and shows the same behavior in IE7 and Firefox 2. In a nutshell, I have a former footer below which I am now adding a web link directory space. I am using a div wrapper to set a color for the page which is different than the background in to highlight the page. What I would like to have happen is for the background on my .page wrapper to extend to the bottom of the directory. Instead the .page color is still stopping at the footer. Oddly, if I remove the clear tag from the footer, the .page background doesn't appear at all!
Ultimately I could create the same effect by assigning a background color to the directory itself but that seems pretty crazy. Please accept my apology in advance for my ugly/amateur code. I have some validation problems from some plugin scripts that I'm afraid to fix for fear of breaking something... I'm so embarrassed to expose my code to the light of day! One last mention, there is a call to flowers.css which currently does not exist. It will be used just to tweak colors.

Thank you so much in advance for any help/insight you can provide.

Korak

Here's the XHTML:

Flower Homepage at Flowers.AreMyFix.com

');
var Hours;
var Mins;
var Time;
Hours = Stamp.getHours();
if (Hours >= 12) {
Time = " P.M.";
}
else {
Time = " A.M.";
}
if (Hours > 12) {
Hours -= 12;
}
if (Hours == 0) {
Hours = 12;
}
Mins = Stamp.getMinutes();

if (Mins < 10) {
Mins = "0" + Mins;
}
document.write(Hours + ":" + Mins + Time + '');
//-->

Dedicated to the one I love....

Dedicated to the one I love....

Submit your favorite picture!

Enter your search terms

Submit search form

Today's Interesting Site


Dive Lounge

The best scuba site on the net

Please enter a zipcode to customize weather.

Click Here

Tell me how to make this page better!

Flower Resources and Sites

Organisations:

PADI NAUI DAN Oceana ReefCheck

_uacct = "UA-2076600-3";
urchinTracker();

Here's the CSS:

body {
width: 980px;
background: #E6E6E6;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
font-size: .9em;
font-family: sans-serif;
padding: 0px;
line-height: 1.4;
}
.page {
background: #E5F9FF;
}
a {
text-decoration: none;
padding: 0px;
color: blue;
margin: 0px 2px;
}
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
background: #8FFFFF;
color: blue;
}
a:focus {
background: #8FFFFF;
color: blue;
}
a:active {
color: black;
background: blue;
}
/*** Header Stuff ***/
#header {
height: 40px;
clear: both;
background: #33CCFF;
display: block;
overflow: hidden;
}
#header #name {
float: left;
margin-top: .2em;
margin-left: 5px;
}
#header #tagline {
float: left;
margin-top: 1em;
font-weight: bold;
}
#tagline {
margin-left: 10em;
}
#header #timedate {
float: right;
font-weight: bold;
}
h1, h2, h3 {
display: inline;
padding-bottom: 0px;
margin: 0px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: small;
}
/*** Picture Block Stuff ***/
#picture {
float: left;
width: 500px;
text-align: center;
}
#picture img {
display: block;
margin: 0px auto;
}
#picture p {
margin: 0;
}
#picture a:link {
color: blue;
}
#picture a:visited {
color: blue;
}
/*** Search Block Stuff ***/
#search {
height: 50px;
float: left;
margin-left: 4em;
margin-top: .8em;
}
input.forminputbutton {
width : 110px;
}
/*** Standard Links Block Stuff ***/
#standardlinks {
margin-left: 1em;
margin-top: 1em;
float: left;
line-height: 1.6;
}
#standardlinks .title {
color: black;
font-size: 1.4em;
font-weight: bold;
position: relative;
left: 7em;
}
#standardlinks .title p{
display: inline;
}
.category {
margin: 0px;
}
.category p {
font-variant: small-caps;
font-weight: bold;
width: 4.5em;
display: inline;
margin: 0px;
float: left;
}
.category a {
font-size: .9em;
}
/*** Directory Stuff ***/
#subdomain .category {
float: left;
}
#subdomain .category p {
width: 8em;
display: block;
}
#subdomain .category a {
display: block;
clear: left;
}
.even {
background: white;
}
#subdomain {
text-align: center;
float: left;
width: 980px;
}
/*** Cool Site Block***/
#coolsite {
float: left;
width: 500px;
text-align: center;
margin: 5px;
}
#coolsite p {
margin: 0;
}
#coolsite a:link {
color: blue;
}
#coolsite a:visited {
color: blue;
}
/*** Weather Stuff ***/
#weather {
float: right;
margin-top: -1.8em;
margin-right: 9em;
}
#getzipform {
float: right;
margin-right: 3em;
}
/*** Footer Stuff ***/
#footer {
height: 20px;
clear: both;
background: #33CCFF;
}
#footer a:link {
color: blue;
}
#footer a:visited {
color: blue;
}
#about{
float: left;
margin: 1px;
}
#makehomepage {
display: inline;
float: left;
margin-left: 13em;
font-weight: bold;
}
#tell {
float: right;
display: inline;
margin: 1px;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

#subdomain is floated. Read

#subdomain is floated.

Read up on containing floats. They are out of flow and not surrounded by their parents except under certain circumstances.

Simplest solution is to add overflow:hidden to .page

Korak
Offline
newbie
Irvine, CA
Last seen: 14 years 49 weeks ago
Irvine, CA
Joined: 2007-08-17
Posts: 6
Points: 0

Thanks! Why does that work?

Thank you so much for your quick response! Why does overflow: hidden work? I thought that attribute would, well, hide something...

Will read up some more on containing floats... Still struggle to get my brain around it even when I think I do!

Thanks again,

Korak

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

It works because a side

It works because a side effect of overflow is to create a new display context - which is one way to enclose a float. There are three properties which will create a new display context, overflow, position:absolute and float. Position:absolute and float have side effects. When the height is auto (as in your case) overflow has normally insignificant side effects. Height auto means the height can expand, so it'll never overflow and therefore there is no overflowing content to hide (vertically). The possible side effect is it will hide any content that overflows the width of the element. Normally that isn't an issue.

Another side-effects is related to the creation of a new display context. Margins won't collapse across the boundary of a display context. Often people find margin collapsing outside of a defined container confusing and undesirable - so this is often a plus.