layout "breaks" in narrow window

[lynnharvey]

Okay, I've made some test pages with my css layout of choice - 3 columns, left and right absolutely positioned.

My only reservation at this point is that the layout breaks when the window is narrowed to about 6 inches wide (at which point the middle content column is only wide enough to show a few words per line and the outside columns are each a little less than 200px wide including padding and borders). By break, I mean the middle column and the right-hand column overlap.

Is this something I should expect and not worry about, or is there a way to prevent this overlapping of the middle and right-handed columns?

Edit: I also meant to say, I'm not using float because I want the content at the top of the page and the two columns below that in the html.

[ruserious]

You could use a floated layout and still have the center col first in the sourcecode. Just have a right-floated container-div, and within you first put the middle col and then the right col.
The last (i.e. the left) col just gets floated left.

With absolute positioning you will always (I think) have overlapping when you narrow the browserwindow.

[MWpro]

I wouldn't even worry about this; I assume that not many people browse the web with the browser at 6 inches.

I assume you are positioning the left and right columns from their respective sides. So this behavior is understandable when you decrease the width of the broswer (which is really just changing the right side.) If the right side goes closer in, and there is stuff positioned from the right side, then that stuff will go in as well.

You say you don't want to use floats, so the only way I can see to avoid this would be to position everything from the left side. This, however, is tricky if you want to make a fluid design. If you are designing for a specific resolution though it shouldn't be a problem. If you are trying for a fluid layout then you would want to position them using percents, but even this may get tricky.

I don't know what else to tell you, except that don't totally shut out the idea of using regular page flow. From my experience, having the content above the other code doesn't really have a greater effect than just putting it where it should be.

-Edit-
I really like ruserious's idea: great suggestion. Seems like it would work really well and you still would have the content first.

[TGecho]

Another option is to use min-width on the html tag. Set it to the narrowest possible width you can stand, and the page won't shrink any further than this, even if the window does.

Of course, IE doesn't support this (what's new?) so you'll have to use a javascript called minmax.js (do a google search).

You may not like this, but I figure choices are good, right?

[lynnharvey]

I had pretty much decided not to worry about it, but I wanted a few opinions first. My previous layout used floats but I had some problems with it. Honestly, while I was learning about absolute positioning, I think I learned enough about floating to fix my previous problems.

I do use the sides for positioning, and I'm not sure how successful I'd be with the liquid layout positioning everything from the left, although I might fool around with it one day when I have some time, and I might try floating the content too.

Basically, the reason I want the content at the top comes down to convenience for me. I make template pages and then cut and paste my html formatted content into the page. It makes it easier to paste (or type) my stuff into the page without having to scroll and find the middle section where my content would go if I used a layout that followed the flow of the page (not to mention that I like my navigation on the right instead of the left, so the flow would be just as weird).

Thanks everyone!