Making div float to right

I have three columns on my site with the middle column being the news. The problem is I need the news to appear first in the source code for SEO reasons.

At the moment I have the rightbar absolutely positioned to allow for this but ideally I really need it to float on the right.

I've made a test version of my site so I can mess with the CSS so can someone take a look and tell me how to make the right navigation (#rightbar_wrapper) float to the right yet keeping the news content at the top of the source code?

Thanks in advance

 

Is it possible? Or must I use absolute positioning?

 

Couple sample layouts that show how it's done:

Full screen width:
http://battletech.hopto.org/for_others/3col_div.html

Fixed width:
http://battletech.hopto.org/for_others/3col_div_fixed.html

 

I've started using negative margins and floats to get the content in first, take a look at http://blog.html.it/layoutgala/

 

I would go with absolute positioning and then floating the left content left and the right content right. That margin stuff never made sense to me, maybe it is just me...

 

It's just you

Actually, absolute positioning of COLUMNS is usually a /fail/ if you cannot guarantee the height of any of the columns will not change AND your page will have a footer... since absolutes can NEVER push the footer down. It's the whole point of float layouts is to dynamically adjust regardless of the heights of the columns.

Absolute positioning major layout elements is almost always a /fail/... you can get away on it inside fixed-height elements with fixed-height elements - apart from that, you risk layout breakage.

 

So can anyone tell me the values I should put for my css?

 

Copy one of the layouts from Layout Gala, the one that best matches your site (as there are 40 of them) and just modify them.

 

I'm struggling to make this work even when looking at the examples... would someone be able to look at my CSS and give my the values?

 

your css in the source is pretty messed. you're going for a fixed layout, right?
so it would be easy to do. I will help you out, if u can send me only part of css u used for news and sidebars. mail me that at ekta.paneri[removethis]@gmail.com.
will fix it in few hours.

 

Add to the #newswrapper in the mw.css (line 17)

float:left;
margin:0px -800px 0px 129px;

To the #navbar_wrapper (line 56)

float:left;
margin:0pt -200px 0pt 0pt;

To the #rightbar_wrapper (line 66)

float:left;
margin:0pt 0pt 0pt 610px;

 

Thank you very much VimF but your code works for FF but not for IE 6 and below.

I have a IE only CSS, would you know different values needed for that?

I've made the changes you gave.

 

Okay then add these to your IE only css:

#newswrapper { float:left; margin:0 0 0 64px; width:468px; height:100%; }
#navbar_wrapper { position:absolute; left:10px; top:10px; width:116px; overflow:hidden; margin:0; }
#rightbar_wrapper { float:right; width:171px; margin:0; }

 

Thank you so much, all working