Proper resizing of middle column

[Daan]

Please look at the following page:

http://campuslaan37.student.utwente.nl/temp/index.html

In IE6, the page displays correctly when using a normal sized font.
However, when the user selects a smaller font, the right column overlaps
the middle column. How can I change my css code such that the middle
column will just resize?

In Firebird, the right column does not overlap the middle column, but
there will be a horizontal scrollbar and the right column disappears off
the screen on the right side.

TIA,

 

[Barry Pearson]

Please look at the following page:

http://campuslaan37.student.utwente.nl/temp/index.html

In IE6, the page displays correctly when using a normal sized font.
However, when the user selects a smaller font, the right column
overlaps the middle column. How can I change my css code such that
the middle column will just resize?

I don't know, but I've just had trouble with a page of mine getting IE 6 to
handle "em" in the way other browsers do. It appeared to get its sums wrong. I
wonder if your use of "em" is part of the problem?

In Firebird, the right column does not overlap the middle column, but
there will be a horizontal scrollbar and the right column disappears
off the screen on the right side.

Classic Firebird behaviour. Note also how the vertical scrollbar eventually
disappears behind the RHS of the viewport. Netscape 7.1 tends to superimpose
the right column onto the middle column. Then eventually it, too, loses the
vertical scrollbar.

 

[brucie]

http://campuslaan37.student.utwente.nl/temp/index.html

http://moreshit.bruciesusenetshit.info/screencap01.png [17k]

 

[Daan]

Daan said:

http://moreshit.bruciesusenetshit.info/screencap01.png [17k]

Is that a full screen picture of the site?! I know it isn't all-browser
all-resolution proof, but my aim was to have it look good at least in the
most common browsers with a resolution of 800x600. Any thoughts on the
right-column problem?

 

[brucie]

http://moreshit.bruciesusenetshit.info/screencap01.png [17k]

Is that a full screen picture of the site?!

its part of a full screen 800x600 screencap

this is full screen 800x600
http://moreshit.bruciesusenetshit.info/screencap02.png [61k]

Any thoughts on the right-column problem?

as soon as i saw i would have to stuff around with my browser settings
just to read the text i didn't bother looking any further. i did the
screen cap and left.

 

[rf]

Daan said:

http://moreshit.bruciesusenetshit.info/screencap01.png [17k]

Is that a full screen picture of the site?! I know it isn't all-browser
all-resolution proof, but my aim was to have it look good at least in the
most common browsers with a resolution of 800x600. Any thoughts on the
right-column problem?

I looked at the page and thought... Hmmm, I'll just download this and fix it
for you.

Then I saw what you have done.

The complexity of this code is overwhealming compared to what it does.

You have the basic elements of the page there. Well actually you don't, you
have the elements so wrapped up in divs that I could not determine what went
were.

Lets say you isolate the basic elements of the page: the top logo, the nav
bar, the left stuff, the right stuff and the middle stuff, in that order,
each in their own div, IF you need to do that. If you don't then do not use
an enclosing div.

Delete your entire CSS file and place these basic elements on the canvas by
judicious use of CSS rules.

The first and second elements can just sit there. No positioning requires.

The left stuff is floated left, with a suitable width in ems. The right bit
is floated right, with a suitable width in ems.

The middle bit is left alone apart from margin-left: a little bit bigger
than the width of the left div and margin-right: a little bit bigger than
the width of the right div.

That's it. Just floats, widths and margins. When you rebuild your CSS do not
put in any position: relative stuff and keep it real simple.

BTW I saw some much worser things happen to your page than those brucie
screenshoted for you

Cheers
Richard.

 

[Daan]

Thanks for your comments Richard, I'm working on cleaning up (or actually
rewriting) my CSS code right now. But, with your idea of setting the width
of the right and left section and the margin of the middle section, my
original problem still exists. It is caused by the picture in the right
column. The width of the right column can't be downsized because the picture
apparently determines the minimum width of the column. This causes the
margins of the center part to become smaller then the width of the right
part, thus making the right part overlap the center.

Is there a workaround to this problem? Thanks for all the help so far,

 

[Daan]

Lets say you isolate the basic elements of the page: the top logo,

the nav bar, the left stuff, the right stuff and the middle stuff, in
that order, each in their own div, IF you need to do that. If you
don't then do not use an enclosing div.

Delete your entire CSS file and place these basic elements on the
canvas by judicious use of CSS rules.

This should be an improvement then:

http://campuslaan37.student.utwente.nl/new_site/index.php

The stylesheet for positioning is called stylePos.css and for color and
layout is styleLay.css. The positioning should be better now. In Opera 7.02,
IE6 and Firebird 0.6.1 it looks ok on an 800x600 resolution with all but the
largest text sizes.

There's just one more problem I can't figure out: in IE6 at some
resolutions, the last lines of the text in the middle part of the site are
indented a little less then the lines before. This occurs from the height
where there is no longer a floating left column, until the end of the page.
I figure there is some margin or padding I have to set to 0, but which and
where?!

Thanks,

 

[rf]

Thanks for your comments Richard, I'm working on cleaning up (or actually
rewriting) my CSS code right now. But, with your idea of setting the width
of the right and left section and the margin of the middle section, my
original problem still exists. It is caused by the picture in the right
column. The width of the right column can't be downsized because the picture
apparently determines the minimum width of the column. This causes the
margins of the center part to become smaller then the width of the right
part, thus making the right part overlap the center.

Is there a workaround to this problem? Thanks for all the help so far,

1) Increase the width of the left and right columns and the margins of the
center one to enough ems so that the images do not intefeer, even at the
smallest feasible font size adjustment. You will have to experiment here, IE
only has half a dozen or so sizes, Mozilla et al have from sub-microsopic to
half the size of the cosmos. Then again, Mozilla does not have the
overlapping problem, it simply overflows the images out the right hand side
of their parent div and, in your case, off the canvas.

2) Specify the width of the left and right columns and the margins of the
center one in pixels. This ensures that you can precisely position the
borders wider than the images. Of course you then have to use enough pixels
so the text does not cause problems as it is enlarged. Once again you have
to experiment.

Cheers
Ricard.

 

[rf]

This should be an improvement then:

http://campuslaan37.student.utwente.nl/new_site/index.php

Its somewhat better. Not perfect at very large or very small font sizes but
good at what I like to use and slightly smaller or larger, which is good
enough.

There's just one more problem I can't figure out: in IE6 at some
resolutions, the last lines of the text in the middle part of the site are
indented a little less then the lines before. This occurs from the height
where there is no longer a floating left column, until the end of the page.
I figure there is some margin or padding I have to set to 0, but which and
where?!

Known IE bug. No known workaround AFAIK.

Cheers
Richard.