3

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?
Improve this question
2
  • All your questions can be answered by saying CSS is terrible for layout.
    – Ryathal
    Mar 26, 2012 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, 2012 at 23:20

1 Answer 1

Reset to default
1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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