Large content in fluid layouts...

[dorayme]

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

 

[Els]

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.

 

[dorayme]

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.

I'll read up on that one later, thanks


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