Footer not clearing properly

Ian Watts

Hi

I am designing a website for a local school, and I have knocked up a
quick prototype for them to look at.

http://www.ianwatts.info/schoolweb/

http://www.ianwatts.info/schoolweb/school.css

The problem I am having is that the footer is not clearing both of the
previous divs - I am sure I am missing something very simple.

I have validated the HTML and CSS, and the only thing missing is ALT
attributes, and as this is a prototype, that doesn't seem too important
(and I am fairly sure it can't cause this problem - please correct me if
I am wrong)

I have achieved this before, but I can't work this out now.

Any suggestions?

Ian Watts

Jul 20 '05 #1

Els

Ian Watts wrote:

Hi

I am designing a website for a local school, and I have knocked up a
quick prototype for them to look at.

http://www.ianwatts.info/schoolweb/

http://www.ianwatts.info/schoolweb/school.css

The problem I am having is that the footer is not clearing both of the
previous divs - I am sure I am missing something very simple.

I have validated the HTML and CSS, and the only thing missing is ALT
attributes, and as this is a prototype, that doesn't seem too important
(and I am fairly sure it can't cause this problem - please correct me if
I am wrong)

I have achieved this before, but I can't work this out now.

Any suggestions?

Your #main has position:absolute and float:right. This
doesn't work well together. Instead of position:absolute and
left:19%, use margin-left:19%.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #2

Ian Watts

Els wrote:

Ian Watts wrote:

Hi

I am designing a website for a local school, and I have knocked up a
quick prototype for them to look at.

http://www.ianwatts.info/schoolweb/

http://www.ianwatts.info/schoolweb/school.css

The problem I am having is that the footer is not clearing both of the
previous divs - I am sure I am missing something very simple.

Your #main has position:absolute and float:right. This doesn't work well
together. Instead of position:absolute and left:19%, use margin-left:19%.

Thanks for the prompt reply, and the footer is now doing what I want,
but #main is now starting below the left col, instead of on the same
level (I think that is why I originally used position:absolute)

A new URL to show this

http://www.ianwatts.info/schoolweb2/
http://www.ianwatts.info/schoolweb2/school.css

Jul 20 '05 #3

Els

Ian Watts wrote:

Els wrote:

http://www.ianwatts.info/schoolweb/
http://www.ianwatts.info/schoolweb/school.css

The problem I am having is that the footer is not clearing both of
the previous divs - I am sure I am missing something very simple.

Your #main has position:absolute and float:right. This doesn't work
well together. Instead of position:absolute and left:19%, use
margin-left:19%.

Thanks for the prompt reply, and the footer is now doing what I want,
but #main is now starting below the left col, instead of on the same
level (I think that is why I originally used position:absolute)

A new URL to show this

http://www.ianwatts.info/schoolweb2/
http://www.ianwatts.info/schoolweb2/school.css

Since your #main comes after #leftcol, I think you should
make it float:left, not right. Then you don't need the left
margin either. Or you could not float it, and give it a
left-margin. That's what I did on the site in my sig.
That way you can give the width of your menu in ems instead
of percentage, so the links remain easily readable when the
window is narrowed.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #4

Ian Watts

Els wrote:

Ian Watts wrote:

Els wrote:

http://www.ianwatts.info/schoolweb/
http://www.ianwatts.info/schoolweb/school.css

The problem I am having is that the footer is not clearing both of
the previous divs - I am sure I am missing something very simple.
Your #main has position:absolute and float:right. This doesn't work
well together. Instead of position:absolute and left:19%, use
margin-left:19%.

Thanks for the prompt reply, and the footer is now doing what I want,
but #main is now starting below the left col, instead of on the same
level (I think that is why I originally used position:absolute)

A new URL to show this

http://www.ianwatts.info/schoolweb2/
http://www.ianwatts.info/schoolweb2/school.css

Since your #main comes after #leftcol, I think you should make it
float:left, not right. Then you don't need the left margin either. Or
you could not float it, and give it a left-margin. That's what I did on
the site in my sig.
That way you can give the width of your menu in ems instead of
percentage, so the links remain easily readable when the window is
narrowed.

Hi, and thanks - both ways work perfectly - I have stuck with not
floating and using left margin.

Many thanks

Jul 20 '05 #5

Ian Watts

Ian Watts wrote:

Els wrote:

Ian Watts wrote:

Els wrote:

> http://www.ianwatts.info/schoolweb/
> http://www.ianwatts.info/schoolweb/school.css
>
> The problem I am having is that the footer is not clearing both of
> the previous divs - I am sure I am missing something very simple.

Your #main has position:absolute and float:right. This doesn't work
well together. Instead of position:absolute and left:19%, use
margin-left:19%.

Thanks for the prompt reply, and the footer is now doing what I want,
but #main is now starting below the left col, instead of on the same
level (I think that is why I originally used position:absolute)

A new URL to show this

http://www.ianwatts.info/schoolweb2/
http://www.ianwatts.info/schoolweb2/school.css

Since your #main comes after #leftcol, I think you should make it
float:left, not right. Then you don't need the left margin either. Or
you could not float it, and give it a left-margin. That's what I did
on the site in my sig.
That way you can give the width of your menu in ems instead of
percentage, so the links remain easily readable when the window is
narrowed.

Hi, and thanks - both ways work perfectly - I have stuck with not
floating and using left margin.

Many thanks

I said it worked a bit prematurely - it works in Firefox, my browser of
choice, but not IE6, most peoples browser by default. However, your
first solution works in both (simply float it left)

Thanks again

Jul 20 '05 #6

Els

Ian Watts wrote:

http://www.ianwatts.info/schoolweb2/
http://www.ianwatts.info/schoolweb2/school.css

Since your #main comes after #leftcol, I think you should make it
float:left, not right. Then you don't need the left margin either. Or
you could not float it, and give it a left-margin. That's what I did
on the site in my sig.
That way you can give the width of your menu in ems instead of
percentage, so the links remain easily readable when the window is
narrowed.

both ways work perfectly - I have stuck with not
floating and using left margin.

I said it worked a bit prematurely - it works in Firefox, my browser of
choice, but not IE6, most peoples browser by default. However, your
first solution works in both (simply float it left)

Funny, it works on my site :-)
Here's a simplified version of it.
http://locusmeus.com/html-css/simple.html

Did you perhaps give a width to #main?

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #7

Ian Watts

Els wrote:

Since your #main comes after #leftcol, I think you should make it
float:left, not right. Then you don't need the left margin either.
Or you could not float it, and give it a left-margin. That's what I
did on the site in my sig.
That way you can give the width of your menu in ems instead of
percentage, so the links remain easily readable when the window is
narrowed.

both ways work perfectly - I have stuck with not floating and using
left margin.

I said it worked a bit prematurely - it works in Firefox, my browser
of choice, but not IE6, most peoples browser by default. However, your
first solution works in both (simply float it left)

Funny, it works on my site :-)
Here's a simplified version of it.
http://locusmeus.com/html-css/simple.html

Did you perhaps give a width to #main?

I did indeed - both ways work well now in both browsers - many thanks,
yet again

Jul 20 '05 #8