Hi,
I am trying to put together a CSS-based layout consisting of a header, a
sidebar and a main content area.
Page: http://www.westeros.org/ASoWS/
CSS: http://www.westeros.org/ASoWS/ASoWS-All.css (the relevant IDs are
towards the bottom)
JS: http://www.westeros.org/ASoWS/SetHeight.js
Using a javascript (based on this one:
http://www.saila.com/attic/sandbox/set-height.html), I have almost
managed to make the sidebar and the content area of equal height.
However, a couple of issues remain that I haven't been able to sort out
on my own:
1) The margin-bottom of 25px set on the #Sidebar and #Main DIVs doesn't
seem to be respected. Or rather, it isn't respected on #Main so when I
use the javascript to set #Sidebar to the same height, the same effect
occurs there. However, the issue with #Main occurs even when I am not
trying for equal column height, so it isn't really related to that.
2) #Main uses a padding of 10px all around. This appears to have
resulted in the javascript incorrectly calculating the height of
#Sidebar. I found another, similar javascript
(http://www.paulbellows.com/getsmart/balance_columns/) which appears to
allow for a correction of the error introduced by the padding, but I
haven't been able to figure out how to adjust the first javascript
(which seems a little easier to update for additional DIVs, hence why I
prefer it) to do the same.
3) In IE, in addition to the two first problems, the margin-right of
25px on #Main is not respected. The DIV spills all the way out to the
edge and actually a little beyond, resulting in a horizontal scrollbar.
This also occurs even when I am not trying for equal column height, so
it isn't really related to that.
If anyone has any ideas for how to sort these problems out, I'd be very
grateful. :)
Linda
