View Full Version : Alternative to overflow:auto (sidebar without tables)

05-18-2010, 09:47 PM

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


The thing is, when the overflow:auto 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.

05-18-2010, 09:50 PM
Most forums I have seen don't allow the image to be maximized in it's post (possibly because there isn't a way to do it) and instead just link you to the image in a new tab/window.

05-18-2010, 11:49 PM
Well, yeah it's possible with VB/IPB. The problem won't be solved that way though - I'm selling this template. It has to have no bugs in it. This is not an option at all. I need to tweak the code.

Anyone willing to help please? Even willing to pay for this as it's pissing me off so much.

05-19-2010, 12:47 AM
Sorry about that, I missed the image of the menu being hidden.
You could try using the z-index property but you will also have to use the position property also for it to work.

But for large images, from the image that I'm seeing, when the image is maximized it's disappearing "under" the side menu, if you wanted it so that the image displayed fully it would either push everything out to the right making the page look broken while it's full or it would overlay over the side bar again looking broken, the other option is to make overflow scroll for that post so it would still be partially hidden, and the user would have to scroll to the right to see the rest of the image but that would be annoying for the user to have to scroll to see the image in sections in a sense.
You could also use lightbox or something similar. But the best option is to have the image auto fit (like it is) and click to see the whole image in a new tab/window, that isn't really a bug, but a useful function rather than having to scroll to see a large image.

hope that is a little more helpful.

05-19-2010, 03:59 PM

Thanks for your reply.

I tried to do a z-index:10000; and a position:absolute and it won't work at all.

I'm so lost right now.

05-19-2010, 04:26 PM
There may be some help here (http://exitfegs.co.uk/Sources.html). Use the search box.


05-19-2010, 06:45 PM
You may want to try clearing using the :after pseudoclass.