Div does not wrap the entire page width

Question

I am using jQuery UI tabs as my container div. Now I need to show ALOT of the data in the table, which will almost always be wider than the container itself. Unfortunately, I cannot get the container to wrap.

See this fiddle

I tried the positions, overflow: auto , but nothing works as I want it. overflow: auto places the horizontal scrollbar in the tabs, but I want it on the body. Does anyone have an idea how to do this?

In short: I need #main-div wrap all child div without scrollbar on tabs. I just want to wrap my content so that the div is dynamic with the content

Answer 1

Is this what you mean? Everything I did was like that and removed the relative position.

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

Answer 2

Add #test { overflow: auto; } #test { overflow: auto; }

WATCH DEMO

Answer 3

 #main-tabs div { position: relative; overflow: auto; } 

Answer 4

Jsfiddle

I added overflow: scroll;

in any case, here you get a scroll on both axes so that you can look at the scroll overflow on x and y Checkout here (remember that this property is css 3) do not know which browsers support it.

Answer 5

 #test { overflow: scroll; }