Tall screen, one column, wide screen, two columns Options

[ugcheleuce]

Hello everyone

I have a tall screen (1920x1080) and I'm making a web site (mostly for my own use) that works well with such a layout. Currently, the pages use HTML 3.2 tables, because it serves my purpose.

Each page contains an image of about 780 pixels wide, plus text inside PRE tags that is also a maximum of about 780 pixels wide (on my screen, with default zoom, etc). The image is a scanned page from a book, and the text is the same text, converted to plain text, just like the scanner converted it.

It occured to me that I might want to view the pages on a wide screen sometimes, and this means that the text should be to the right of the image... but only if there is enough room on the right-hand side of the image. I don't want the text to wrap, and I don't want the text to flow off the screen.

I guess this could be done using simple positional CSS, am I right? So essentially, I want two "boxes" on my page that will display above-and-below if the screen is narrow, and side-by-side if the screen is wide enough.

Can anyone here please tell me how to do that? It doesn't have to look beautiful.

Thanks
Samuel

[pandy]

Two DIVs, one or both of them floated left. Floats automatically rearrange themselves if there isn't room for them to be side by side.

[ugcheleuce]

Two DIVs, one or both of them floated left. Floats automatically rearrange themselves if there isn't room for them to be side by side.

Thanks for the helpful answer. In the mean time I also found this:
http://learnlayout.com/media-queries.html
but your comment helps me understand what's happening. With a bit of tinkering I was able to get the effect I wanted.

==
Hmm, I see no option to mark the thread as "solved"...

This post has been edited by ugcheleuce: May 1 2015, 01:29 PM

[pandy]

Good you solved it. We don't mark threads solved or lock them. It's enough you told us.