5 replies [Last post]
Graham Thomson
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2005-01-18
Posts: 12
Points: 0

Hi

I was using the 3 column layout tutorial below -

http://css.maxdesign.com.au/floatutorial/tutorial0916.htm

The problem I am having is that when the browser is contracted enough the middle column is the one that is pushed down below the left and right column.

With the layout I am working on it would be better if the right column was the one that got pushed down below the other two when contracted like this.

I am assuming it is to do with the "order" and the natural flow of the page and the way it has been written, however is there anything I can do in the CSS itself to try and achieve the effect where it is the right column that gets pushed down rather than the middle one?

Thanks in advance
Graham

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

3 column layout

I'm not sure what you mean by 'pushed down' the center column in that example is a fluid one with fixed width side columns, the centre content naturally adjusts to the width of the centre as it has no actual fixed width but is a remainder of the viewport width after the columns have had their bite of the pie.

This perhaps is not the design you are after maybe all fixed source ordered would be better did you actually want a fluid centre?

One thing that perhaps should be done with that example layout is to add a min-width to the container so that the layout can only shrink to a certain width and not collapse completely.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Graham Thomson
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2005-01-18
Posts: 12
Points: 0

3 column layout

Hi

Yes I wanted the middle column to be fluid. However I was wondering if I could achieve the effect with this design whereby if there was content in the middle column which was say a fixed width of 400 pixels (an image for example) then if when the browser window is contracted down and the point is reached where the middle column cannot contract further - could the css be worked so that the right hand column jump down below the middle column?

At the moment, what would happen is that the content in the middle column gets jumped down to the bottom of the page so that when a user comes to visit it it looks empty.

Thanks again
Graham

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 28 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

3 column layout

Please show your code or a link?

- r

Graham Thomson
Offline
Regular
Last seen: 15 years 36 weeks ago
Joined: 2005-01-18
Posts: 12
Points: 0

3 column layout

This should give you an idea - If you contract the page you'll see the content in the middle jumps down below the left and right navigation -

http://www.gt-test15.stir.ac.uk/test3col-graham.php

Just wondering if there is a workaround for this?

Thanks again
Graham

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 28 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

3 column layout

As Hugo said, applying 'min-width' to your page would be the best bet if you are wanting the middle column to remain fluid. Why do you want the right column to fall below the others? From a user's standpoint that would be distracting.

- r