Check out the float tutorial.
erenon
2009-06-22 21:47:12
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)
j3frea
2009-06-22 22:05:02
Thanks, I'm looking into it... It seems too simple to be a solution :) - hopefully I'm wrong... I'll get back to you
j3frea
2009-06-22 22:06:39
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...)
j3frea
2009-06-23 05:29:53
A:
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.
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
j3frea
2009-06-23 05:11:03
A:
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.
j3frea
2009-06-23 06:02:57
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
j3frea
2009-06-23 07:17:49