Hello,

I am currently making a vBulletin skin, and was wondering if there were any alternative to overflow: auto? The thing is, I'm trying to create a sidebar without tables AND with a fluid wrapper.

My CSS code looks like this:

#wrapper {
 width: 90%;
 min-width: 980px;
 margin: 10px auto 0 auto;
 background: #1a1a1a url(images/magnetic/style/wrapper.png) repeat-x top left;
 border: 1px solid #161616;
 overflow-x: hidden;
 -moz-border-radius: 8px 8px 8px 8px;
 -webkit-border-bottom-left-radius: 8px;
 -webkit-border-bottom-right-radius: 8px;
 -webkit-border-top-left-radius: 8px;
 -webkit-border-top-right-radius: 8px;
}

#right-content {
 float: right;
 width: 275px;
 color: #7a7a7a;
 padding: 15px 0;
}

#left-content {
 margin: 0px 0 0 0;
 background: #e9ecee url(images/magnetic/style/bg-main.gif);
 padding: 0px;
 min-height: 800px;
 overflow: auto;
 overflow-x: hidden;
 -moz-border-radius: 8px 8px 8px 8px;
 -webkit-border-bottom-left-radius: 8px;
 -webkit-border-bottom-right-radius: 8px;
 -webkit-border-top-left-radius: 8px;
 -webkit-border-top-right-radius: 8px;
}

And here's what the HTML looks like:

<div id='wrapper'>

        <div id='right-content'>

Right content (sidebar) here

        <!--end right--></div>

            <div id='left-content'>

The left content here

            </div>
</div>

The thing is, when the overflow is there, the page looks fine BUT it has issues when opening, for example, dropdown menu or expanding a big image.

Here's what it does when opening a dropdown menu:


Here's what it does when trying to open an image:


So what I'm trying to do, is to create a fluid layout with a right sidebar without tables. It's working, although I'm looking for some code modifications so it doesn't have issues with the dropdowns etc. Basically, it seems that everything looks fine BUT when we open something that is "larger" than the #left-content ID. Then it creates issues.

Any idea?

Thank you so much in advance.

I'm not understanding why you need overflow: auto in the first place. You should be able to create a 2 column layout without one. Usually I float both columns to the left, though some people prefer floating one column to the left and one to the right.

What are you trying to accomplish with overflow at the moment?

The thing is, I can't just float both columns because then it will mess up when changing the resolution (making it smaller - 1280x1024 or smaller). I need one fluid column (left) with one fixed column (right sidebar).

You should be able to set that up without overflow. Floating and being fluid are different things. You can float both columns, give the sidebar a fixed width, and not give the main content column a width so it can be a fluid column. As the resolution changes the left column will expand and contract accordingly.

Floating both elements will not work. Well it will, but when you reach a certain resolution, everything will mess up. Here's a screenshot of the 2 elements being floated (left content floated to left and sidebar floated to right) with a resolution of 1280x1024. Floating both elements is useful for fixed layouts only.

Floating both elements is useful for fixed layouts only.

That's just not true, if it were, then there would be a ton of fluid layouts that wouldn't be around today.

If you're using overlflow:auto to clear floats, then you cannot set a width or height on that same element w/o getting scrollbars. You must also be VERY careful with your dimensions, margins and padding - meaning you need to completely understand the box model.

There are also other methods for clearing floats. It's nearly impossible to know what to suggest when we can't SEE the problem in action - videos and screenshots don't help.

Floated elements work fine in fluid layouts. If your content is dropping like that it's not being cause by the float. It's something else. Like LNR said if you can post a link or at the very least some code it will be easier to help.

My gut tells me that the problem is something inside your content area does have a width set on it that's forcing the whole column to be at least a minimum width.

Also if you float both columns to the left it's more likely the column on the right would be the one to drop down.