If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Your left column stays at a fixed width and stays on the left. Meanwhile, the right column of the table adjusts to fit the width of the browser but stops shrinking at a certain point. Set a minimum width for the right one that.

In other words, your HTML would be something like this:

Code:

<div class="left-column">
I am the left column.
</div>
<div class="right-column">
I am the right column.
</div>

I'm not sure what you mean, by margin/padding. My example didn't specify a width for the right column (aka take out "width:78%"). Take out the width, and your right column will adjust accordingly.

The 78% is to keep the right hand column from wrapping/jumping under the left-hand column when the browser becomes too narrow. The goal I am looking for: "How to keep the right column from jumping under (liquid result), and fill out 100% to the right hand border of the browser.

Users who have thanked tracknut for this post:

Hello ryanjohnsond,
Mixing % and px measurements doesn't work very well. Assuming 100% is the full width available in .wrapper, here are the two elements that are sharing that space - 78% plus 220px = ???

Users who have thanked Excavator for this post:

The 78% is to keep the right hand column from wrapping/jumping under the left-hand column when the browser becomes too narrow. The goal I am looking for: "How to keep the right column from jumping under (liquid result), and fill out 100% to the right hand border of the browser.

Oh, I see what you mean. So the wrapping effect is the problem. Looks like you got a few solutions. Here's a third solution I checked this in IE7+, Chrome, and Firefox. They all work.

Hello ryanjohnsond,
Mixing % and px measurements doesn't work very well. Assuming 100% is the full width available in .wrapper, here are the two elements that are sharing that space - 78% plus 220px = ???

I tried your demo and it breaks in IE, even though it works in IE, in the original demo. Is that because there is a perecentaged width on the divs. It seems you have to go below a comfortable number for the browser so it doesn't wrap the right hand columns. I don't want them to wrap. Here's my error using your demo example:https://www.youtube.com/watch?v=_ETSRyeCVrE

I tried your demo and it breaks in IE, even though it works in IE, in the original demo. Is that because there is a perecentaged width on the divs. It seems you have to go below a comfortable number for the browser so it doesn't wrap the right hand columns. I don't want them to wrap.

I didn't mean for you to use that demo, that snippet of code I posted was based on that demo.

That snippet will also break until you decide what you want to do with your overflow. A min-width, see my commented bit of CSS?, would stop the site from collapsing down to a width that would keep the content from just disappearing - it would still be available with an X scroll.

I didn't mean for you to use that demo, that snippet of code I posted was based on that demo.

That snippet will also break until you decide what you want to do with your overflow. A min-width, see my commented bit of CSS?, would stop the site from collapsing down to a width that would keep the content from just disappearing - it would still be available with an X scroll.

That's it. It works great!

What's the philosophy and the functionality behind Overflow? I see that the green disappears when i remove it. I don't understand when to use it.