Using CSS, how do I move an entire right-hand column of my 3-column template from to the left side of the page?

Question

The original template code worked fine for layout but it put the left-hand content at the top of all our search results (when the center column is the one that needs to be emphasised).

I moved the left-column code below that for the center column, assuming that the CSS code is telling the left column where to physically sit on the page.

But now, the wider center column is sitting on the left side of the screen, then the two narrower sidecolumns are side-by-side on the right hand side.

Isn't there a way I can tell the layout that I want one of the columns to be placed on the left side of the screen? Or is it primarily due to the order of the elements in the template doc?

Answer 1

I'm a little rusty but here goes.

Search results will default to the first info in your body tag if you do not define a meta tag. A meta tag would probably be your quickest solution to solving your primary problem without changing the design.

As for the design itself, the wonderful thing about CSS is you can move stuff around by only adjusting your css instead of your content. I know for sure if each of the columns are in their own separate containers you can move them around by setting widths and margins or playing with floats.

Answer 2

Hello,



If your design is cracking ( and if it is a fixed layout ) then I guess the calculations are just not adding up.



Keep a breather between the 3 columns. Reduce the width of the left column to half of what it is and see if the design spreads correctly. Use trial and error method for the calculations OR start from the beginning and go on adding all the values correctly.



there is a nice tutorial on 3 column template at



http://www.gateway2internet.com/tutorials/css/css_box_model.php

Answer 3

It's hard to say for sure without actually seeing the markup, but I'm guessing there's some divs using the float parameter (float: left, float:right). The order the content actually appears in the document does matter, as the floats get "stacked" next to each other.



Look for parent divs or other containers and see what "float" they use, if anything. If any of them *don't* use float, by default later items will appear to the right or beneath.

Answer 4

This CAN depend on the order in the code, or on your CSS code.



If you set the css code to show



left

{

position : absolute;

left : 0;

width : 200px;

z-index : 1;

}



middle

{

position : absolute;

left : 0;

padding-left : 200px;

padding-right : 200px;

z-index : 1;

}



right

{

position : absolute;

right : 0;

width : 200px;

z-index : 2;

}



and set up the divs in your source it should display correctly.



(there are ways you can leave out the center div but it gets messy and is not recomended coding).

Answer 5

Use Adobe Dreamweaver. They come in templates.