Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm trying to understand the following cross-browser layout: but I'm having some confusion with some of its parts and there isn't enough information on the page or in the css comments to help me.

  • What is the purpose of the .colleft div? Why can't the 2 columns be directly under the .colmask container?
  • Why does the .colleft div have a right 75%? I don't understand its purpose/benefit.
  • Why don't the widths of .col1 and .col2 add up to 100%?
  • How was left:102% calculated for .col1 and left:6% for .col2? The comments for this are not very clear to me. How is it any different from not even specifiying a left/right css property?
share|improve this question
All your questions can be answered by saying CSS is terrible for layout. – Ryathal Mar 26 '12 at 20:47
This seems like a really old blog post. IE 5.5, 6 and 7? Firefox 1.5, 2 and 3? I'm not saying there's value in understanding how it works, but there might be better ways now for achieving multiple column layouts (I haven't really gone through the blog post you linked, honestly. sorry). Depending on how old browsers you want to support, using display: table/table-row/table-column might be enough. – frozenkoi Mar 27 '12 at 23:20

Do not be confused by the color-coded 'nested div structure'. It represents the div hierarchy in HTML, but the layout that is achieved is shown in the 'Percentage dimensions of the left menu layout'.

In this case, colleft is used as a spacer that sets aside space on the left column, while col2 is the actual content of the left navigation. Note the border around col2. Setting margins will probably give the same effect though.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.