Columns CSS problem?

HTML & CSS
1

Hi Everyone! I’ve got a nagging problem with my layout at marinebio.org. I’ve got 3 columns as divs and need the left one to dictate the minimum height since it’s the longer compared to the right div. The center content is often longer than either and when so all displays perfectly. When it’s not, the left and right’s overflow is hidden (which I have set below for now). Here’s the CSS I’ve written and I’ve been wrestling with this for days:

center div:
#main-content{padding:10px 180px 20px 160px;background:#fff;height:auto !important;}

left div:
#left-sidebar{position:absolute;left:0px;top:0px;width:160px;bottom:0;background:#0085cf;height:auto !important;height:auto;overflow:hidden;}

right div:
#right-sidebar{position:absolute;right:0;top:0;width:180px;bottom:0;background:#0085cf;height:auto !important;overflow:hidden;}

Any suggestions would be great, the site’s high traffic and needs to work in as many newer browsers as possible. Thanks in advance.

2

Yes, sorry I don’t know how I msised that :shifty:

3

Hi, removing overflow:hidden would indeed fix this, however, you are using absolute position for the columns, and that is where your flaw is. Make the 3 column layout using floats instead of absolute positioning, and then nothing will be clipped :slight_smile:
Edit-Should have refreshed.

4

Thanks anyway, I think I went to absolute for the min/max width option… Will see if I can make it work and keep it all. Will post a working template here if I do for others to use as payback (3 column w/no overflows + min/max width overall + centered - all latest browsers).

5

LOL, bookmarked it already, looks perfect. Thanks again to all. Will hopefully post back soon.

6

For future reference, pmob.co.uk has many examples :slight_smile:

7

isn’t that what I said already?

8

No wonder I’m having trouble. I want to keep the fixed min/max width and center the site overall (which is why I went with absolute)… will see about floating divs, at least the site’s easy to change. Thanks a lot.

9

First off, welcome to Sitepoint! You’ve come to the right place.

you can’t achieve this when all your divs are position:absolute, think of position:absolute as text boxes in Word, they behave pretty much the same as those and if my memory serves me right, there’s no chance you can do what you want with those text boxes either.

What you need is a floated layout, our very own Paul O’B got a few examples on his site: http://pmob.co.uk/