|
P: n/a
|
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 | |
Share this Question
|
P: n/a
|
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 - | |
|
P: n/a
|
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 - | |
|
P: n/a
|
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 | |
|
P: n/a
|
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 | |
|
P: n/a
|
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 - | |
|
P: n/a
|
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. | |  Question stats - viewed: 1856
- replies: 7
- date asked: Jul 20 '05
|
