Large content in fluid layouts...

Discussion in 'HTML' started by dorayme, Apr 17, 2006.

  1. dorayme

    dorayme Guest

    In a layout of two cols, left floated div box, width defined as
    35%, and static other div box with left-margin of 40% but no
    specified width, (to grow with the natural size of the window),
    not even min-width, it is sometimes wanted to have a non-breaking
    element like a picture in the static box. When the window is
    reduced in width enough to make the static right unable to hold
    the pic, it will overflow (and scrollbars will come on when even
    the pic won't fit in the window), in a good browser like FF. In
    IE, it will do odd things depending, the picture (at least)
    always dropping below the level of the float unless special
    provisions are made.

    There are different approaches. To keep the fluidity, I always
    seem to end up making my pictures smaller to avoid the trouble.
    But what are others on alt.html doing on this one so that IE can
    at least seem to behave better?

    I heard a suggestion to make the images into background ones. The
    whole point of this is to minister to that elephant in the room,
    IE.

    There is javascript to get IE to mimic min-width. I might have to
    get to like this more and more. Until, that is, IE7 becomes more
    ingrained.

    There are various techniques discussed at
    http://www.clagnut.com/blog/268/

    Anyway, what are the methods you folks tend to prefer...

    --
    dorayme
     
    dorayme, Apr 17, 2006
    #1
    1. Advertising

  2. dorayme

    Els Guest

    dorayme wrote:

    [IE not coping with too wide fixed width objects in fluid width
    column]
    > There are different approaches. To keep the fluidity, I always
    > seem to end up making my pictures smaller to avoid the trouble.
    > But what are others on alt.html doing on this one so that IE can
    > at least seem to behave better?


    Yup. I do that.
    Or I set a min-width based on larger pictures.

    > I heard a suggestion to make the images into background ones. The
    > whole point of this is to minister to that elephant in the room,
    > IE.


    Haven't used that option.

    > There is javascript to get IE to mimic min-width. I might have to
    > get to like this more and more. Until, that is, IE7 becomes more
    > ingrained.


    I don't use JavaScript, but I do give IE a min-width, using IE's own
    proprietary script stuff in the CSS file:
    http://www.svendtofte.com/code/max_width_in_ie/

    > There are various techniques discussed at
    > http://www.clagnut.com/blog/268/


    I'll read up on that one later, thanks :)

    > Anyway, what are the methods you folks tend to prefer...


    I combine smaller images and min-widths on pages, but the real problem
    occurs when building a CMS site for a client. You don't know
    beforehand what size stuff the client is gonna put on the page.
    Currently I've given a client instruction to disable the right side
    column when the tables in the middle column are wider than a certain
    width. That will save quite a few column-drops. But if they put in a
    table that's even wider, the column *will* drop. Of course I can work
    with position:absolute to avoid that, but then there's other problems
    with clearing floats and footers and stuff.
    Another solution is overflow:auto, so that scrollbars will appear if
    the content is still wider than the column. Disadvantage of that is,
    that the width of the left column is taken off the available viewport.
    Especially on narrow viewports that's not very good.
    (obviously, as it's tables in this case, a background-image technique
    won't work either)
    And then there's the option to not have more than one column in such
    cases, but not all sites are good with horizontal navigation.

    --
    Els http://locusmeus.com/
     
    Els, Apr 17, 2006
    #2
    1. Advertising

  3. dorayme

    dorayme Guest

    In article <>,
    Els <> wrote:

    > dorayme wrote:
    >
    > [IE not coping with too wide fixed width objects in fluid width
    > column]


    > I don't use JavaScript, but I do give IE a min-width, using IE's own
    > proprietary script stuff in the CSS file:
    > http://www.svendtofte.com/code/max_width_in_ie/
    >


    Yes, this looks good, I will study this. Presumably you give
    ordinary min-width for all the compliant browsers (as I often do)
    and add the proprietary scripts (which are ignored, I take it, by
    other browsers) for the elephant to behave.

    > > There are various techniques discussed at
    > > http://www.clagnut.com/blog/268/

    >
    > I'll read up on that one later, thanks :)
    >
    > > Anyway, what are the methods you folks tend to prefer...

    >
    > I combine smaller images and min-widths on pages, but the real problem
    > occurs when building a CMS site for a client. You don't know
    > beforehand what size stuff the client is gonna put on the page.


    Yes, I see, what a headache this would be...

    --
    dorayme
     
    dorayme, Apr 18, 2006
    #3
    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. Russell Wallace

    Fluid look and feel?

    Russell Wallace, Sep 17, 2003, in forum: Java
    Replies:
    8
    Views:
    492
    Russell Wallace
    Sep 23, 2003
  2. Chris Harris

    How fluid?

    Chris Harris, Jul 15, 2003, in forum: HTML
    Replies:
    3
    Views:
    485
  3. Luigi Donatello Asero

    Size of a table in a fluid design

    Luigi Donatello Asero, Oct 18, 2004, in forum: HTML
    Replies:
    3
    Views:
    884
  4. Ramon F Herrera

    Swing layouts vs. SWT layouts?

    Ramon F Herrera, Nov 10, 2007, in forum: Java
    Replies:
    5
    Views:
    2,740
    Benjamin Toren
    Dec 7, 2009
  5. William Gill

    when is fluid a design too fluid?

    William Gill, Aug 17, 2010, in forum: HTML
    Replies:
    9
    Views:
    647
Loading...

Share This Page