[grumpykate]

Can anyone help with an html+css to give the columns in the right order for SEO. I want the middle column (which appears 3rd in my html) to be first. I have fixed width columns and fluid middle. . . Point me in the right direction???

Thanks
Kate

[Faevilangel]

You need to rewrite and do it with css, the following would work

html

 <div class="column" id="left">
  content
 </div>
 <div class="column" id="middle">
  content
 </div>
 <div class="column" id="right">
  content
 </div>

css

 .content {
  float:left;
  width:300px;
 }
 #left {
  margin-right:25px;
 }
 #middle {
  margin-right:25px;
 }
 #right {
 }

The brilliance of the code above, is that it is so easy to edit the columns, you can add a different colour to each, add different widths and any other css attributes. You need to keep the "float:left" as it makes all of the columns appear in a line.

Hope that helps

[grumpykate]

Thanks but have I explained myself. . . ? Columns left and right will just have pictures in them. The centre column will have all the text - therefore for SEO and search purposes I want the text (the middle column) to be first in the html..

<div id="center">
Blah blah
</div>

<div id="left">
pictures
</div>

<div id="right">
pictures
</div>


Will what you have given me work?

cheers

Kate

[empek]

I would recommend you go with what Faevilangel said.

The only way you can get this to work is by using absolute positioning, but things get messy really quickly that way.

You wont sacrifice much SEO if you have the sidebar come before the content.

[grumpykate]

Makes my life easier! Thanks for the advice.

[notbanksy]

There is a way you can do this, although it's not as clean as I'd like. What you need to do is enclose the main content (middle) and the left column in a div of their own, and float it left. Float the right column to the right, then position the main content and left column within their own div like so:

<div id="2col">
<div id="centre">
<!-- main content -->
</div>
<div id="left">
</div>
</div> <!-- 2col ends -->
<div id="right">
</div>

#2col {width:720px;float:left;}
#centre {width:480px;float:right;}
#left {width:240px;float:left;}
#right {width:240px;float:right;}

Hope that helps

[BlueDreamer]

notbanksy employs the Doug Bowman method - good to see

[notbanksy]

Who's this doug bowman then? I was just using my noggin!

[BlueDreamer]

He's one of the original "CSS gurus" - watch this video about CSS layout techniques - he demonstrates the same method in there