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 7 2004
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 -
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 -
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
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
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 -
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 This discussion thread is closed Replies have been disabled for this discussion. Similar topics
2 posts
views
Thread by Tim Charles |
last post: by
|
5 posts
views
Thread by Tyler Carver |
last post: by
|
reply
views
Thread by Rob E |
last post: by
|
5 posts
views
Thread by Richard Shewmaker |
last post: by
|
7 posts
views
Thread by bobmct |
last post: by
|
2 posts
views
Thread by Paul Neave |
last post: by
|
5 posts
views
Thread by Doug Laidlaw |
last post: by
|
reply
views
Thread by Yorian |
last post: by
|
1 post
views
Thread by donpro |
last post: by
| | | | | | | | | | |