Div not wrapping around whole page in width

Question

I use jQuery UI tabs as my container div. Now I need to show ALOT of data in a table, which will almost always be wider than the container itself. Unfortunately, I can't get the container to wrap.

See this fiddle

I have tried positions, overflow: auto, but nothing seems to work like I want it to. overflow: auto puts the horizontal scrollbar in the tabs itself, but I want it on the body. Anybody have an idea on how to do this?

Long story short: I need the #main-div to wrap around all it's div childs, without a scrollbar in the tabs. I simply wanna wrap my content so the out div is dynamic with the content

Answer 1

Is this what you mean? All I did was this and removed the relative position.

#main-tabs
{
   float:left;
   min-width:100%;
}