0

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...)

Improve this question
5
  • maybe you can attach an image what you want. Commented Jun 22, 2009 at 21:45
  • Down voted for lack of code and lack of images. It also sounds like the poster doesn't need a question answered... the poster needs to practice and study. Commented Jun 22, 2009 at 21:48
  • Upvoted for a nice picture and a good explanation. Commented Jun 22, 2009 at 22:01
  • I have about 350 lines of html and css that create this layout as close as I can get it to being right (where only IE mucks it up). I hate sifting through code to help other people and so decided to spare you the pain... I'm not looking for someone to write me a page; I'm looking to be told "it's impossible" or "use clear: both on xyz and IE will stop mucking up" etc. Commented Jun 22, 2009 at 22:01
  • Yes I am sure it is possible or at least possible to create a site that will degrade properly but without the code it is hard to see where you are going wrong. Commented Jun 22, 2009 at 22:44

4 Answers 4

Reset to default
1

Check out the float tutorial.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, I had actually looked at this. The problem was that the content column was not truly equal height and so I couldn't get rounded corners on it... (and square corner look like muck on a nicely rounded site)
0

This 2 column layout caters for IE deficiencies.

Improve this answer

2 Comments

Thanks, I'm looking into it... It seems too simple to be a solution :) - hopefully I'm wrong... I'll get back to you
Strangely, it doesn't seem to work on IE at all - the right hand column fills the width of the page (I'm talking about IE 6). Also, for anyone else, the page this comment links to is slightly broken (although you can view source, I think it is supposed to have a brief explanation of what to do...)
0

IE has problems with the float model (although apparently there's improvement in IE 8). You could try using just absolute positioning... even though that's probably not the ideal solution.

Improve this answer

1 Comment

The problem with absolute positioning is that the main background (the dark blue thing with the gradient in the image) doesn't extend for floated divs
0

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.

Improve this answer

1 Comment

Okay, the bottom margin is sorted out; I added a div to the bottom of the main div with the following styles: .bottommargin { display: block; position: absolute; top: 100%; height: 20px; width: 95%; margin: 0 auto; } So this div goes to the bottom of the main div and basically gives it a margin that has no background color. I've resolved the rounded corners issue as well but that was a jquery issue and is not relevant

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.