Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I'm trying to understand the following cross-browser layout: http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm 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
add comment

1 Answer

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
add comment

Your Answer

 
discard

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.