It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index Programming CSS Forum

clear: both; not working right

clear: both; not working right

Postby mwa103 on Thu Aug 03, 2006 3:11 pm

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/
mwa103
100+ Club
 
Posts: 206
Joined: Mon Mar 07, 2005 10:55 pm

Postby webmaster on Thu Aug 03, 2006 4:23 pm

What do you want should happen with clear: both; ?
Make sure to check out our TNX Review and Link Vault Review
User avatar
webmaster
Site Admin
 
Posts: 2695
Joined: Tue Aug 17, 2004 1:07 pm
Location: Sweden

Postby mwa103 on Thu Aug 03, 2006 4:24 pm

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
mwa103
100+ Club
 
Posts: 206
Joined: Mon Mar 07, 2005 10:55 pm

Postby johneva on Thu Aug 03, 2006 5:25 pm

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
Image
Only God Can Judge Me.
User avatar
johneva
500+ Club
 
Posts: 565
Joined: Sat Oct 29, 2005 1:16 pm
Location: Stafford, England

Postby mwa103 on Thu Aug 03, 2006 6:10 pm

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.
Last edited by mwa103 on Thu Aug 03, 2006 7:19 pm, edited 1 time in total.
mwa103
100+ Club
 
Posts: 206
Joined: Mon Mar 07, 2005 10:55 pm

Postby mwa103 on Thu Aug 03, 2006 6:38 pm

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
100+ Club
 
Posts: 206
Joined: Mon Mar 07, 2005 10:55 pm

Postby mwa103 on Tue Aug 22, 2006 11:35 pm

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. :lol: 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
100+ Club
 
Posts: 206
Joined: Mon Mar 07, 2005 10:55 pm

Postby mwa103 on Wed Aug 23, 2006 10:44 pm

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. :lol: 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
mwa103
100+ Club
 
Posts: 206
Joined: Mon Mar 07, 2005 10:55 pm


Who is online

Users browsing this forum: No registered users and 0 guests