Fixed Width Box Inside Liquid Width Box – Help Needed

[MrCheck]

Although I’ve used styles for years, I’ve resisted the move to full blown css layouts so far. I’m currently working on a site re-design and am trying to convert the existing table based layout into a css layout with divs and spans, etc. Having just spent the last 4 days trying to convince css to display my site in a manner that would have literally taken me less than 5 minutes using one table, I think I finally have it doing almost everything I need it to. Except one last thing.

Rather than posting the entire layout, I’ve stripped out everything but the part that isn’t working right. I’ve also included the same layout using a table to demonstrate what I WANT it to do. Here’s the code:

Code:

Preferred Method

This is a test

Working Method

This is a test

When you resize your browser window and shrink it down horizontally, the outer box adjusts to the width of the browser. When the outer box reaches the right side of the inner box, I want it to stop shrinking since it’s contracted as far as it can without overlapping the inner box. Also, if the page is loaded when the browser is shrunk down, the right side of the outer box should be off the screen to the right with a scroll bar at the bottom of the browser window so you can scroll over to see the right side of the content.

All I’m trying to do is have a fixed width box inside a liquid width box. Sounded so simple when I started this endevor and it may be a very simple fix. I just can’t seem to stumble upon it.

Thanks in advance

[MrCheck]

I was trying to keep the example as simplistic as possible, but I should have included a few more details. The problem is, at design time, I don’t know how big the inner box is going to be. It could be a table that will only compress down so far, it could be an image with a diagram on it that extends out past the right hand side of the screen. In the case of a table, depending on the data in each field that comes back from the database, the minimum width can change. Same thing with images based on how complex the diagrams are.

With a table, the right hand edge of the outer table will stop contracting when it reaches the edge of the inner table or image or whatever is inside it, even though I haven’t specified the minimum width of the outer table.

With a div, I’m trying to recreate the same behavior. I need the outer box to contract until it reaches the edges of the inner box, at which point it should stop contracting.

Any way to do this using css?

[Author]

Posts