I have a reasonably complex layout problem:
I would like to have a main box that has 95% width
and that has side margins all around (140px 2.5% 20px 2.5%).
Within that box I would like to have two columns:
The first should (left hand) should have a transparent background and will be mainly for links but also some other arbitrary block content (like poll results etc.). The menu in this bar is an unordered list and I would like it to highlight in such a way as to appear to join with the content when active (which means that the 2nd column must be at least as high as the menu is; thus equal height columns are an issue although, I don’t mind using min-height and assuming that the menu will never be longer than, say, 400px). This column should be 180px (unless a percentage is absolutely vital; then just assume 30%)
The second column is the content column and should be padded in slightly from the main content holder but not from the left hand column (so that the links appear to join the content). I would like have rounded corners on this column which means that the standard faux column technique will not work because the rounding does not apply to it. (this column should take the rest of the available space inside the main div that is 95% wide)
I also like the idea of using rounded corners on the left hand side of the highlighting of the active menu item.
All this is going to have an absolutely positioned header above and if possible, I would prefer to use jquery’s “corner” plugin to create rounded corners rather than images but I’m at a stage where it doesn’t matter immensely.
The problem is that I’ve done each thing individually but not all together. IE generally mucks it up somehow. For example, the closest that I’ve come to doing it correctly, IE decided that although my menu bar was floated to the left, it shouldn’t actually write any content horizontally in line with the menu and so although the box was there (I could see the background) the content was halfway down the page…
Sorry that this is so long and without code but it seems silly to give a pile of code to what seems like should be a trivial problem…
Here’s what I managed to get working in standards compliant browsers:
alt text http://www.inselpix.com/img/24036931603.jpg
(I’ve never used this image host before, I hope it works…)
Thanks all, Katesmeow probably helped the most:
Turns out what I needed to do was absolutely position the main div and the left (menu) div (which I gave a minimum height) and then relatively position the content div. I made the left menu 18% wide with a 1% left margin and the content div I made 80% wide with a 1% right margin. I also had to add bottom padding to the main div according to the top offset that I gave to the content div (so I used “top: 30px” to give the main div padding from my content div and then used “padding-bottom: 60px” to compensate 30px for the top – because otherwise the div extends too far – and then add a further 30px of padding).
The problem is that IE still mucks it up; so while my main div is 95% wide, IE doesn’t do the relative widths properly and my main content pane is too wide. So, I used conditional comments and set the content div to be 76% wide (95% x 80% = 76%) and it’s working reasonably well. The rounded corners are doing something slightly odd in IE but it’s fine… The biggest problem now is that I don’t have a bottom margin on the main div but I can live with that if I can’t figure it out.