In our last episode,
<
[email protected]>,
the lovely and talented Tayo
broadcast on alt.html:
Cheers for the reply guys.
First of all, I didn't design or make the site, I'm working with what
is already there. Apparently they're getting a new site (completely
made in flash HA!) shortly so I'm not going to change the menu and the
rest of the site as it's not what I have been asked to do.
Lars..I don't really understand what you're saying..Could you be a bit
more specific?
What you really have here is two-columns with the left of the two columns
having two columns. <
http://larseighner.com/EIGHNER/> has a similar layout,
although I have not done the hacks for IE, so possibly it only works in
Firefox or similar and the right column steals its space from both padding
and margins (so it hangs over the left column a bit). I suggest you use
only margin, since you do not need this effect.
You have two banners (mastheads). One goes accross the whole page and one
goes across only the left column (which is split into two below it). You
need a container DIV that includes your left columns banner, left columns
and right column. It needs a right margin that is the width of your
pictures for the right column, plus some padding. Then you need to float
your right column right with a negative right margin equal to the right
margin you left for it. The score between the left columns banner is, I
suppose created by a border. You may have to adjust the margin to account
for that because if there is even 1px overlap, the design will break.
There are three things you can steal space from to make room for a floated
column: margin, padding, and border. If you want your floated column to
have its own background color "all the way to the bottom" you have to use
border. You can get the hang-over effect by using a combination of padding
and margins with a transparent background for your floated column. But when
it is all on white (or all some other color) keep it simple by just using
margins. The basic strategy is the same: create the space and float with a
negative margin.
As others have suggested, you must have valid markup, which you do not.
You did not close some head elements properly for XHTML. Those elements
don't show, but because they make the document invalid they may throw
browsers into quirks mode with unpredictable results. There is really no
reason for this document to be XHTML, but it ought to be one or the other
with the proper doctype.
And rf - the menu is in there, it's those images on the right hand
side , that's the "menu" I'm talking about. but currently the layout
goes
Container > Main> content > left /left, center /center, right /right /
content
but then there is an image which goes across the left and center
columns so I have to close it off and start a new content div but that
can't start until all the right hand column is finished from the
previous.