I have a three-column layout for a film blog site, laid out as follows (also see screenshot, etc., for reference):
[Left]Post metadata, e.g, date posted. Also usable for other items, e.g., Twitter feed.
[Centre]Blog post itself
[Right]Other items, e.g., Twitter feed, link to archives, etc.
I currently have the centre column aligned to the centre of the screen using
margin: auto;. I'd like the right edge of the left column, and the left edge of the right column, to "stick" to the respective edges of the centre column. I'm going a little crazy trying to get this to work :-)
In case it's relevant, the template has been designed for a screen with 1280px+ width. Out of interest, would you consider this too big? If so, the centre and right columns could shrink a little in width (ideally by making them fluid-width), but the left column has to remain fixed at 300px because of the graphics.
If it's possible, I'd like the left and right columns to occur after the centre column in the HTML (as is currently the case), for SEO and accessibility reasons.
#sidebars-wrapper div I've tried might be a red herring... I don't know yet if it's actually helping or hindering my situation!
Thanks in advance for your help.
Update I've now included a screenshot of the problem (below), as the one provided by DocType seemed to display a different problem. IE7 is a whole other can of worms I've opened. Note the red-bordered areas indicate the problem: the two side
divs should stick to the centre
I fixed this by adding another wrapper div, wrapping the post and the two sidebars (but excluding the header). I was then able to adjust the margins of the sidebars by the 30px required to get them to line up properly. The design is now fixed-width, but I don't see that as a bad thing.
Now I just need to battle with IE 7! :-)
First of all, targetting 1280px width screen should be acceptable these days, though personally I will go for 1024 instead.
To resolve your issue, you might want to create a wrapper around 'post', left and right sidebars. Something like this:
<div id="mainWrapper"> <div id="post">main post content here</div> <div id="leftsidebar">style to float left</div> <div id="rightsidebar">style to float right</div> </div>
The mainWrapper DIV will need to have a fixed width of say 1260px to prevent re-stacking of the DIVs. You can center it using the "margin auto" method.
For the post DIV, you can either give them a left/right margin at least to the same width of the left/right sidebar, or center it with a fixed width as well.
The above suggestion will preserve having the main post content above the sidebars in the HTML markups.
Try negative margins, they are pretty tricky to get, especially in IE6 but the effort is totally worth it.