Large content in fluid layouts...

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

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

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

There are various techniques discussed at /

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


Re: Large content in fluid layouts...

dorayme wrote:

[IE not coping with too wide fixed width objects in fluid width
Quoted text here. Click to load it

Yup. I do that.
Or I set a min-width based on larger pictures.
Quoted text here. Click to load it

Haven't used that option.
Quoted text here. Click to load it

I don't use JavaScript, but I do give IE a min-width, using IE's own
proprietary script stuff in the CSS file:

Quoted text here. Click to load it

I'll read up on that one later, thanks :-)
Quoted text here. Click to load it

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            /

Re: Large content in fluid layouts...

Quoted text here. Click to load it

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.

Quoted text here. Click to load it

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


Site Timeline