I've used two different ways of making three columns. If B is the center column, and A and C are on each side:

  1. Float column A and column B next to each other inside a div. Then float this div and column C next to each other.
  2. Float column A and column C to the left and right and give each a width. Then give column B margins equal to the widths of A and C. Set a minimum width for the page.

Option 2 seems more elegant to me, as it only requires three divs, but I haven't seen many examples of it. Can you think of any examples of sites using this style? Which style do you use? Is there a reason to prefer one over the other?

Thanks!

1 answer

Ktash 1851
1
point
This was chosen as the best answer

Not sure if you've already seen these, but A List Apart has some great articles on column layouts [1][2][3]. There are also a lot of other great articles on the site for different techniques for this.

My personal opinion is that option 2 is more elegant because, as you said, it uses one less div. Column A and Column B, in understanding at least, are not content related, so grouping them in a div seems counter to the separation of content and style. The second is a CSS solution without messing with the content of the page. CSS solutions without the need for extra, extraneous HTML is always, in my opinion, a better solution.

Answered about 6 years ago by Ktash
  • I'm finding a lot of examples where widths are set in pixels, and the A List Apart articles use negative margins on the outside columns, but I'm looking specifically for an example where left and right are set in em and the center has left and right margins given in em. Have you seen this? paracaudex about 6 years ago
  • ems are not the most common form off setting widths, heights and such, but I've seen it and used it. The technique they use should be able to be translatable to em measurement without issue. Mind you, I haven't tested that out, but any measurements in pixels should be something that you can just set to ems, since its all just a width/distance. Ktash about 6 years ago