clear: both; not working right

[mwa103]

I'm having a little issue converting my site I built into css. The footer is set to clear: both, but it doesn't. I'm sure it's just something I'm overlooking. I'm new to css so bear with me. Thanks for the help.

-Mike

http://www.wiu.edu/users/mwa103/2col/

[webmaster]

What do you want should happen with clear: both; ?

[mwa103]

Sorry about that. I'm wanting the footer to stretch across both columns instead of just the one on the right. Thanks for the help.
-mike

[johneva]

How have you coded the rest of the layout is it a 2 col layout using floats then?

Post the code on here and I can take a look for ya.

This is a good tutorial on how to make css layouts, it is a 3 col layout but easy enough to change once you have learnt how it works.

http://alistapart.com/articles/holygrail

[mwa103]

Thanks for the link John, I was looking for that site. I knew you had posted it before, but I couldn't find it. I copied the code off of this site:
http://realworldstyle.com/2col.html
I modified it a little to try to get it to look right. Here's what I got:

Code: Select all

html, body {
   margin: 0;
   padding: 0;
   background-color: #fff;
   color: #333;
   }

#container {
   width: 1010px;
   left: 0px;
   right: 0px;
   margin: auto;
}

#events {
   padding: 10px;
   width: 290px;
   margin-left: 710px;
   border-left: 1px solid #006;
   }
   
#ScrollDiv
{
    width: 100%;
    height: 100px;
    overflow: auto;
    background-color:transparent;
}
   
#content {
   width: 700px;
   float: left;
   margin-left: -1px;
   padding: 10px;
   }

#header {
   height: 110px;
   width: 1010px;
   background-color: #fff;
   color: #006;
   border-bottom: 1px solid #006;
   margin-bottom: 24px;
   }
   
#footer {
   background-color: #fff;
   color: #006;
   border-top: 1px solid #006;
   text-align: center;
   padding: 2px 10px 0 0;
   clear: both;
   }


#spacer {
   clear: both;
   }
   
p {
   padding: 0;
   margin-top: 0px;
   font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;
   }

dd, dt {
   font-family: 'Lucida Grande', Verdana,  Geneva, Lucida, Helvetica, Arial, sans-serif;
   font-size: 0.95em;
   }

Like I said before I'm new at this so any tips/suggestions are appreciated. Thanks.

[mwa103]

Nevermind guys. I finnaly found it. I had an extra <div align=center> in there that I didn't close. Took it out and it looks right now. I'm still open to any suggestions you guys have to make it look better though.

Thanks
-Mike

[mwa103]

More issues in IE. This issue started as a JS problem and has evolved into a css problem once I realized I didn't like JS. Anyways, if you want to see the whole conversation (not much to it) you can find it here:
http://www.devppl.com/forum/viewtopic.php?p=15723

On to my issue, I found a template here: http://www.cssplay.co.uk/layouts/bodyfix.html
that does exactly what I want (stationary header & footer, scrolling content between). It works perfect in FF, but for some reason IE wont scroll the content overflow even though it is set to overflow: auto. It looks like the text is going on behind the footer instead of stopping above it and scrolling.
Anybody see anything I missed? I had to change a few sizes for the header, footer, and content. Other than that it's the same css as the template. Any assistance is appreciated.

my site again: http://www.wiu.edu/users/mwa103/2col
site's css pages:
main-http://www.wiu.edu/users/mwa103/2col/scroll2col.css
menu-http://www.wiu.edu/users/mwa103/2col/menu.css

Thanks
-Mike

[mwa103]

Finnaly got it. It wasn't a problem with my css at all. All I needed to do was add one line to the begining of my document:

Code: Select all

<!-- Put IE into quirks mode -->

I just missed it from the original document when building mine. Aparently IE won't work as good as Firefox unless you make it go goofy. Anyways, thanks to everyone who took a look at this for me. I think I'm ready to make the change live now. As always, any comments about the site are greatly appreciated.

Thanks again
-Mike