How to move this right column up

[Isaac Grover]

Good evening from Wisconsin,

I have a basic three-column with header layout and my right column is
pushed down 18px from where it needs to be. All the horrible colors
are still in place for your enjoyment. I'm sure this is a simple
answer for all the css gurus out there, but it's evading me.

The page in question is http://www.rfdiscgolf.org/template.html .

Any assistance would be appreciated. Thank you in advance.

 

[dorayme]

Good evening from Wisconsin,

I have a basic three-column with header layout and my right column is
pushed down 18px from where it needs to be. All the horrible colors
are still in place for your enjoyment. I'm sure this is a simple
answer for all the css gurus out there, but it's evading me.

The page in question is http://www.rfdiscgolf.org/template.html .

Any assistance would be appreciated. Thank you in advance.

How about first fixing the errors that are reported in the css
and html by W3C validators.

I believe you will come to grief trying to whip this tightly
pixel based design into shape. Relax. Try some em based widthing.
Remember or note that some people do not have your eyesight or
text size preferences and things spill out in an ugly manner when
you click text size up larger in your browser with tight px
controlled widths and heights.


Here is some rough advice:

Do use some filler text and stuff in your templating tests,
content does affect how things behave.

If you are going to use floating for columns, note what the left
cols width is and make the next column's left margin be about the
same. If you do not try to have everything consciously butting up
to everything else, you will see that it will look reasonably
natural. If you float a right col as well, ditto re the main
content's right margin. Content will grow to suit the browser
window.

You can see the sort of thing re floats and cols at
http://ihpst.org. in respect to the margining for two cols at
least.

 

[Chris F.A. Johnson]

Good evening from Wisconsin,

I have a basic three-column with header layout and my right column is
pushed down 18px from where it needs to be. All the horrible colors
are still in place for your enjoyment. I'm sure this is a simple
answer for all the css gurus out there, but it's evading me.

The page in question is http://www.rfdiscgolf.org/template.html .

The first thing I notice is that you have three DIVs with
id="menuheader". Each ID must be unique.

Those divs should probably be headers (<H2> or <H3>?), and they
ceertainly shouldn't be 18px high. Don't specify a height.

Then get rid of all (or almost all; start with all) the width and
height specifications using px. Where necessary, use '%' or 'em'.

Especially, get rid of #container width and height.

 

[Ben C]

Good evening from Wisconsin,

I have a basic three-column with header layout and my right column is
pushed down 18px from where it needs to be. All the horrible colors
are still in place for your enjoyment. I'm sure this is a simple
answer for all the css gurus out there, but it's evading me.

The page in question is http://www.rfdiscgolf.org/template.html .

Any assistance would be appreciated. Thank you in advance.

You need to move the "rightcolumn" div up in the source so it's after
"leftcolumn" and before "mainbody".

Firefox and IE7 always put floats "on the next line", which is a
non-conformance to the specification. Your original page works as
intended in Opera. The workaround is to put all the floats in first,
before any of the non-floats.

 

[dorayme]

You need to move the "rightcolumn" div up in the source so it's after
"leftcolumn" and before "mainbody".

Firefox and IE7 always put floats "on the next line", which is a
non-conformance to the specification. Your original page works as
intended in Opera. The workaround is to put all the floats in first,
before any of the non-floats.

Looks the same to me in Opera, FF and Safari. iCab is slightly
different, Calendar (right float) there without top gap.

 

[Ben C]

Looks the same to me in Opera, FF and Safari.

You're right, it does. I did try Opera but must have failed to actually
look at it properly.

None of this is due to the "floats going on next line" business,
although the fix of moving rightcolumn up before mainbody does work.

The reason is that mainbody is a block box, so of course rightcolumn
goes below it if it appears after it in the source.

iCab is slightly different, Calendar (right float) there without top
gap.

Now that is a bit odd.

 

[dorayme]

You're right, it does. I did try Opera but must have failed to actually
look at it properly.

None of this is due to the "floats going on next line" business,
although the fix of moving rightcolumn up before mainbody does work.

The reason is that mainbody is a block box, so of course rightcolumn
goes below it if it appears after it in the source.


Now that is a bit odd.

Well, perhaps? You know more about these things... I want to
capture that bit of your brain that contains the knowledge of the
box model and various specs. I have men out trying to locate you
with special probes and recording equipment. <g>

<http://netweaver.com.au/test/iniCab.png>

whereas in FF etc there is the gap above between the purple
calendar bit and the grey line surrounding the pic.

Why are we talking about this Ben! It is a terrible design! See
what happens at a few clicks up of the text size. I still like my
advice to OP of earlier today.

 

[Ben C]

Well, perhaps? You know more about these things... I want to
capture that bit of your brain that contains the knowledge of the
box model and various specs. I have men out trying to locate you
with special probes and recording equipment. <g>

If you have a block box followed by a float, the top of the float should
be aligned with the bottom of the block box. In normal flow (and except
in the presence of negative margins) nothing after a block box is going
to end up higher than the bottom edge of that block box.

<http://netweaver.com.au/test/iniCab.png>

whereas in FF etc there is the gap above between the purple
calendar bit and the grey line surrounding the pic.

The vertical position of the calendar looks the same as in FF and
everything else-- its top is aligned with the bottom of the blue
"mainbody" box. So no oddness there, I misunderstood your description of
what was happening but a picture is worth a thousand words etc.

The grey line looks like the bottom border of #container. It looks like
iCab has ignored the OP's "height: 663" and quite reasonably so because
it should say "height: 663px".

Why are we talking about this Ben! It is a terrible design! See
what happens at a few clicks up of the text size. I still like my
advice to OP of earlier today.

Definitely, my specific comment on what was causing the gap (if it was
even the same gap the OP was talking about-- I can't remember) was not
intended to replace your advice.