Tue, 2006-05-30 16:22
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
Tue, 2006-05-30 18:09
#1
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.
Wed, 2006-05-31 12:28
#2
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
Wed, 2006-05-31 12:31
#3
3 column layout
Please show your code or a link?
- r
Wed, 2006-05-31 13:05
#4
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
Thu, 2006-06-01 12:33
#5
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