container div and 2 columns within

I have a rounded corner container with drop shadow and within it, a left menu and then a content section on the right setup like so


#container
{
margin-top:50px;
margin-left:10px;
padding:0;
display: inline-block;
height:90% !important;
width:90% !important;
background-color:whitesmoke;
}

.reg_menuleft
{
width:210px;
float:left;
}

#reg_body
{
float:left;
}


<div id="container" class="borderall shadow">
<div id="reg_menuleft" class="reg_menuleft"></div>
<div id="reg_body"></div>
</div>


The classes for borderall and shadow just add the rounded corners and drop shadow to the big container. My issue is that when the content on the right is too wide like in the case of a gantt chart or too long from long form or the menu expanded, the menu and/or the content go beyond the the container div instead of making it expand.


The content is dynamic and needs to be able to expand vertically or horizontally or both. Like mentioned earlier we have a gantt chart that tracks days across plus activity down and it can be a rather larger report which I would like for the #container to still contain it and the rounded corner/shadow box always contain these items ( menu / content )


Thanks for any help with this.

Attached are some screen shots of the current behavior

Before expanding and content fits ( how it should look )
http://farm7.static.flickr.com/6173/6147405793_d121c52b2f.jpg (http://www.flickr.com/photos/31289282@N02/6147405793/)


Menu expanded
http://farm7.static.flickr.com/6168/6147966080_0a6c698d75.jpg (http://www.flickr.com/photos/31289282@N02/6147966080/)


Content expanded, notice that it makes the height expand when left menu had not.
http://farm7.static.flickr.com/6170/6147421351_1b79957f8d.jpg (http://www.flickr.com/photos/31289282@N02/6147421351/)


Now for the gantt which ends up the content line-wrapping due to the float left and then shooting out of the container...
http://farm7.static.flickr.com/6196/6147985058_65e36cd197.jpg (http://www.flickr.com/photos/31289282@N02/6147985058/)

Thank you for any help with this, I imagine it is something simple I am overlooking.

Do you have a link to your site?

One thing you might try: I dont see in the little bit of code you provided where you are clearing your floats. Try adding

overflow: auto;

to your container div.


Thats about all I can suggest until I see your site or all your code.

Thanks teedoff, I can't give a link as this is a business app that has a bunch of security and hoops to get someone in if they are not a customer :(

Question, would putting overflow:auto on the container div not add scroll-bars to the container div when things pushed beyond it? Because I don't want that, I want to use the browser scroll-bars if possible.

yeah I just confirmed that. Adding that line of code places scrollbars on the #container and that is not what I want. Thanks gain for the reply but I need something else...

If you notice in screenshot #2 how the menu goes beyond the container but in screen shot #3 the content makes the container grow so it looks correct? I need the behavior in screen shot 3 to work like that for both the left menu and the content going vertically and horizontally

Try adding the overflow auto and removing the 90% height. I think by adding a limit on the height, you're forcing the element to NOT extend to contain all the elements within it.

Ok here is what I have now for container

#container
{
background-color: whitesmoke;

display: inline-block;

margin-left: 10px;

margin-top: 50px;

padding: 0;
}



Still no go :(
http://farm7.static.flickr.com/6192/6148136012_9099f37d84.jpg (http://www.flickr.com/photos/31289282@N02/6148136012/)

ok I created a generic page that is very much simplified but contains most of what I am having issues with.

https://lizzybeta.nizex.com/examples/css_test.html


Now one thing I am confused by is in this test page, the menu expands the container vertically as desired but does not do this in my app :(. And I pretty much copied and pasted my code here. I have been looking for what ever might be messing this up but no ideas so far.

I then put a table with a bunch of text with nowrap set in the td to mimic in a simple way my gantt chart shooting off to the right. #1 the float left has it wrapping down below the menu which it is also doing in my app and #2 you can see that the text shoots outside of the container.

Again the goal here is to keep everything inside the container as things expand either vertically or horizontally no matter what and also to keep the content to the right of the menu on the left. I experimented with absolute and relative positioning and they do in fact keep things where I want them but as expected, the container ignores the fact that either of them has expanded.

Again any help would be awesome. Thanks

One thing is your using tables for layouts, which is discouraged and not good practice. You can read why here (http://www.hotdesign.com/seybold/).

But, aside from that, you could do this instead:


Your text table column...remove the <td> wrap the paragraphs in a div, which I called in my test id of "text", then add this style rule:

#text {
width: 600px; or what ever width you need
margin-left: 50px; again what ever suits your needs
}


Here is a screenshot of the results

While I agree with you about tables, this project was started a few years ago with multiple developers, many of which were not versed in CSS. The amount of time to layout all the forms, labels and data using 100% div layout would have been ridiculous. We literally have 1000s of controls in this system with forms that can have 100+ items on it for a unit sale. Tables were the way to go because we could lay things out and put them where we needed them and cross browser, they stayed put! Using 100% divs just was not realistic with this project. I laid out the main containers for header, top menu, left menu, body and footer in divs so we could adjust as needed but all the individual controls that get loaded via ajax into each region are table based.

I appreciate your solution but it would take me going through every control in the system and every table, td to update to get this solution to work. I am hoping more for you have a div containing 2 divs that will expand, then apply what is needed to the divs to make them work. To me this should be a simple fix for someone that knows more than I as I know I am missing something stupid :)

<div container><!--needs to expand with what is inside it-->
<div menu></div><!--needs to stay inside the container and expand vertically-->
<div content></div><!--needs to stay inside container and expand vertically and horizontally if required-->
</end of div container>

In my mind there has to be a way to do this using classes and CSS on just these 3 divs and me not having to go to all my controls and remove table td and add more divs with classes to force a width. Because like in the case of the gantt chart, it is completely dynamic and I cannot hardcode a width on it. That report could be ran for 2 months and run to the right for a good bit needing a horizontal scroll to view.

Teed, thanks again for your replies and posts. I am still hoping for something else. For now I am turning off the container in the middle's float left and rounded border and drop shadow until I find a solution. This will at least allow clients to work :)