How to shrink one area if another grows with CSS?
I need to achieve one effect with html and CSS:
+-------------------+-----------------+
|some text bla bla |other text here |
+-------------------+-----------------+
+--------------+----------------------+
| some text b..|bigger other text here|
+--------------+----------------------+
The size of the main container is fixed. And I need the second area to always grow and shrink first if the text overflows.
Is this possible with CSS?
source to share
The best solution I can think of (with CSS only) is using position:absolute;
in div / span / p / what you have on the right, so it stays on top of the element on the left. Here's a live example: http://jsfiddle.net/Cthulhu/6DrQX/
However, this is not exactly a good solution, so I would also use javascript like the one suggested by stefan bachert.
source to share
Check out this old answer: How to organize this overflow layout?
Note that the order of the "regions" in HTML is reversed. This probably works in all modern browsers, but I can't remember, so you should test it in browsers that you need to support.
source to share