Proper resizing of middle column

Discussion in 'HTML' started by Daan, Dec 19, 2003.

  1. Daan

    Daan Guest

    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,

    --
    Daan Stolp
    Daan, Dec 19, 2003
    #1
    1. Advertising

  2. Daan wrote:
    > 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.

    --
    Barry Pearson
    http://www.Barry.Pearson.name/photography/
    http://www.BirdsAndAnimals.info/
    http://www.ChildSupportAnalysis.co.uk/
    Barry Pearson, Dec 19, 2003
    #2
    1. Advertising

  3. Daan

    brucie Guest

    brucie, Dec 19, 2003
    #3
  4. Daan

    Daan Guest

    Daan said:
    >> 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?

    brucie wrote:
    > 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?

    --
    Daan
    Daan, Dec 22, 2003
    #4
  5. Daan

    brucie Guest

    in post <news:3fe77fb3$0$64977$>
    Daan said:

    >> 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.

    --
    brucie
    23/December/2003 11:26:35 am kilo
    brucie, Dec 23, 2003
    #5
  6. Daan

    rf Guest

    "Daan" <> wrote in message
    news:3fe77fb3$0$64977$...
    > Daan said:
    > >> 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?

    > brucie wrote:
    > > 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.
    rf, Dec 23, 2003
    #6
  7. Daan

    Daan Guest

    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
    Daan, Dec 23, 2003
    #7
  8. Daan

    Daan Guest

    > 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,

    --
    Daan
    Daan, Dec 23, 2003
    #8
  9. Daan

    rf Guest

    "Daan" <> wrote in message
    news:3fe8b398$0$122$...
    > 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, Dec 24, 2003
    #9
  10. Daan

    rf Guest

    "Daan" <> wrote in message
    news:3fe8d0de$0$64996$...
    > > 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
    >

    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.
    rf, Dec 24, 2003
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Chakravarti Mukesh

    Datagrid Column resizing

    Chakravarti Mukesh, Mar 10, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    2,534
    Patrick.O.Ige
    Mar 10, 2006
  2. Mufasa
    Replies:
    1
    Views:
    273
    John Timney \(MVP\)
    Jun 29, 2007
  3. Noatec
    Replies:
    13
    Views:
    138
    Paul Lalli
    Sep 18, 2006
  4. Pil (Trustworthy from Experience)

    Resizing a div by resizing its borders

    Pil (Trustworthy from Experience), Apr 18, 2009, in forum: Javascript
    Replies:
    9
    Views:
    348
    Proper
    Apr 21, 2009
  5. Proper
    Replies:
    0
    Views:
    198
    Proper
    Apr 18, 2009
Loading...

Share This Page