Hi,

I want to create an adaptive layout for a blog, but I am not sure on the approach to go for with the CSS. I will try and explain the idea, so please assist with CSS coding if you think you can help.

On wide screens you would get three columns: content[1], navigation[2], and other[3]. All with fixed widths, and a fixed total width. When the screen becomes too small to show all three columns, the columns should shrink a little. When the available width is too narrow to display all three then other[3] should be pushed underneath navigation[2].The page then would display content[1] as one column, and navigation[2] and other[3] as one column. When the screen gets even narrower it should push the navigation[2] and other[3] underneath content[1].

How can I create this?

What happened to your Swicthy Mclayout from ALA ??

It used JavaScript and I am trying to make it entirely in CSS. But I am not sure where to begin.

Can't be done without scripting.

For the simple reason that the most popular browser doesn't support the properties that would make it possible.


min-width & max-width

very rough idea of what I guess you are trying to acheive

http://www.candsdesign.co.uk/page-te...ble/layout.asp

works correctly in FF only.

I think we can say that it did not work at all Chrishirst.

What about this then?

<div><div id="content"><div><div id="navigation"><div><div id="other"></div></div></div></div></div></div>

Each column is wrapped in outer div, containing the columns two and two together. I have know idea about the styling, but I imagine it could work with flow: left?