Forum Moderators: open

Message Too Old, No Replies

How to place the content before the sidebar?

XHTML+CSS positioning help

         

sren

9:22 am on Jan 16, 2006 (gmt 0)

10+ Year Member



Not sure if this is the apropiate forum to post this one.
And also I apologize if the title is not too descriptive.

I have a website (it's a WP blog), with this format:

header
left-sidebar---content---right-sidebar
footer

My question is if there's a way to make the "content" to appear before the left sidebar in the html code.
I know you don't know my code, but perhaps there's a standard way to do this trick.

Many thanks.

Don_Hoagie

1:45 pm on Jan 16, 2006 (gmt 0)

10+ Year Member



I'm sure there are some slicker answers that will come along, but the simplest way (simple in process, not necessarily simple in layout) to organize your site content independent of its design position is with CSS' absolute positioning. As you may or may not know, the order in which you code your html (from the top down) dictates what will load first.

Absolute positioning takes items out of the flow of the page, and subsequently, your code... so in this instance, where your list of items in the html code might currently load in this order:

1. header
2. left sidebar
3. content

If you absolute-position the "content" item, you can move it around in your html code order, as it is loading into a position which is independent of the rest of the page. Then, you can move your "content" code block anywhere in the html that you want, which will dictate the order in which it loads:

1. header
2. content
3. left sidebar

You should read up on CSS positioning, but a basic example would be:

<div style="position: absolute; top: 15%; left: 30%;">
this is your content div.
</div>

This bit basically says that your content div will load into that position in the browser window, no matter what everything else is doing... again, you'll want to read up on CSS-P to learn all the ways to play around with positioning. Hope that helps

trevordixon

11:34 pm on Jan 19, 2006 (gmt 0)

10+ Year Member



There's an article at A List Apart that might help you. Go there and search for "negative margins" or "faux columns."

jimbeetle

11:42 pm on Jan 19, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



And search around for WordPress templates. There's a bunch of them out there and you might find you don't have to reinvent the wheel. Just a tweak here and there should get you just what you want.

And if you want is the content column on the left with two narrower columns right (ads and nav maybe?), I think I did see one or two templates along that line.