[Judge_Fire]

I'm working on a site lay-out, which I'd like to keep very simple and ascetic. I want the text to flow according to the window size, but prevent it from forming ridiculously narrow columns.

Easier shown than said - click here.

Everything is inside one DIV, while the IMG and P elements have margin and padding defined.

I've used CSS for styling for ages, but I'm a novice when it comes to any 'advanced' lay-out. Block, float and clear are giving me a headache... so any tips would be greatly appreciated!

J

[Millennium]

There is a min-width property which can be applied to elements; it works like the width element does except that it just specifies a minimum. Unfortunately, it's not very well-supported; Gecko can do it, and I think Opera and Safari can too, but guess who doesn't On browsers which don't support it, it doesn't do anything, so it won't hurt your layout in those browsers, however, neither will it help.

[ism]

Judge_Fire, could you quite possibly be worrying over nothing? If you've got a nice fluid layout like that then if user X happens to get the page load with a 'nasty' narrow column that is difficult to read they can simply adjust the width of the viewing window. Even using a min-width property, it may prove tricky to avoid the narrow column at all font sizes the user may be viewing at.

But for more practical advice go to css-discuss.org and get the help of thousands of experts.

Ooh, I've just found a bit more info. There is a min-width javascript hack to get IE to work. The proper link is http://www.doxdesk.com/software/js/minmax.html , but it's also available here as well: http://georg.editthispage.com/resour...gn/css/scripts

Having said all that, min width really isn't going to help with ONE div is it? It seems you need a less than or greater than width property which doesn't exist. If I was you I'd give up and have a beer or something instead. I think what you have is "Satisficed" solution

[Simon Mundy]

Well, this may be a hack...

Why not insert a < div > that's (for example) 600px wide by 1px high within the enclosing < div > but before the image and the text. That way, because it's a block element, a wider window won't cause the text or image to reflow next to the < div > and a smaller window will only resize to 600px before you get the scrollbars.

Not the 'cleanest' CSS solution, but it will work.

[Judge_Fire]

Thanks for all the quick responses! I'll try out the various things and see what happens...

J