I have a three-column layout for a film blog site, laid out as follows (also see screenshot, etc., for reference):

  1. [Left] Post metadata, e.g, date posted. Also usable for other items, e.g., Twitter feed.
  2. [Centre] Blog post itself
  3. [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.

Finally, the #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 div.

Post Problem

3 answers

This was chosen as the best answer

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! :-)

Answered over 8 years ago by Alastair Smith
  • @Alastair, wrapping a DIV around the 2 sidebars and the post was the very first suggestion in my answer, guess you missed that. Refer to my code. Glad you fixed it anyway. :) o.k.w over 8 years ago
o.k.w 2355

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>

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.

Answered over 8 years ago by o.k.w
  • I have a #wrapper div around #header, #post, #left-wrapper and #right, which is styled as width: 1260px; margin: 0 auto;. #post is styled as width: 600px; margin: auto;. #left-wrapper is now set to float: left; and #right is now set to float: right;, but I can't see any discernable change in the layout. Please note that the screenshot DocType has provided is inaccurate (based on my testing, I think it must have been taken with IE 7). I'll update the post when I get home this evening with a screenshot of the problem I'm seeing in more standards-compliant browsers. Alastair Smith over 8 years ago
  • I'm not sure if I remember correctly but the site of yours now rendered differently when I first view it after you posted your question. It's still misaligned but I think it is closer to what you want, yea? o.k.w over 8 years ago
  • That's possible - I made some updates based on your suggestions. The problem as I see it is as it always was, however. I've uploaded the screenshot as promised. Alastair Smith over 8 years ago
  • Hmm, just browsed through the markups again, I realised `<div id="logo" />` is not rendered as a self-closing tag by FF and IE8. You might want to use `<div id="logo"></div>` instead, else everything will be enclosed in the header div. o.k.w over 8 years ago
  • I usually target for 1004 pixel width layouts to support the largest end-user audience possible. Gary Hepting over 8 years ago
  • @o.k.w Good spot, thanks for pointing it out! @Gary Why 1004 specifically? Is the 20px used for something specific (e.g., padding)? Alastair Smith over 8 years ago

Try negative margins, they are pretty tricky to get, especially in IE6 but the effort is totally worth it.

Answered over 8 years ago by Razvan Pavel
  • Ah, I'll give that a go, thanks for the suggestion! I'm explicitly not supporting IE6, so that removes at least some of the pain :-) Alastair Smith over 8 years ago