Develop Reference

CSS transition works only if Chrome Dev Tools open

I've run into a bizarre anomaly with CSS transitions. The transition is completely ignored on load; but if I open up Chrome Dev Tools and navigate the DOM tree to #popup > div > img and select it, then click on the main image, the transition becomes functional, and remains so even if Dev Tools is closed.
My suspicion is that I've made some weird mistake that I can't see. But when opening Dev Tools to try to probe my CSS makes it suddenly start working, it's a bit hard to debug!
Tested on Chrome 66.0.3359.139. The behaviour is the same in Codepen and as a stand-alone HTML file.
My intention is for clicking on the small image to show a larger one. With the popup visible, clicking anywhere will dismiss that popup. Both showing and dismissing the popup should transition smoothly; for this demo, that's an opacity change followed by a change to the image's top (making it scroll in from above the screen). The popup is controlled by setting a class on the HTML element.
document.getElementById("clickme").onclick = function(ev) {
document.documentElement.classList.add("show-modal");
ev.stopPropagation();
}
document.documentElement.onclick = function() {
this.classList.remove("show-modal");
}
#clickme {
max-height: 300px;
cursor: pointer;
margin: 20px;
border: 1px solid #ddd;
border-radius: .25rem;
padding: 10px;
}
#popup {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0px;
z-index: 2000;
padding-top: 30px;
display: none;
}
.show-modal #popup {
display: block;
}
#popup img {
display: block;
margin: auto;
position: relative;
top: -500px;
opacity: 0;
transition: top .5s 1s, opacity .25s;
}
.show-modal #popup img {
top: 0px;
opacity: 1;
}
#popup>div {
margin: auto;
}
<p><img id=clickme src="http://devicatoutlet.com/img/birthday.png"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, ipsum at porttitor condimentum, turpis ex porta erat, et laoreet purus dui a quam. Vestibulum eget consequat neque, in faucibus turpis. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Praesent interdum sit amet odio eu consequat. Aliquam eget scelerisque odio. Suspendisse potenti. Aenean at risus a dolor facilisis dignissim. Sed et volutpat eros. Nam eget imperdiet lacus. Mauris imperdiet rutrum efficitur.</p>
<div id="popup">
<div><img src="http://devicatoutlet.com/img/birthday.png"></div>
</div>
View on CodePen

CSS can't animate between display: none; and display: block; (of the #popup element). I changed to visibility for #popup.
You can see the new code here: https://codepen.io/anon/pen/KRoPwM. Hope this helps.

Show div in another wrapper while hovering in another

I'm trying to hover on a div inside a wrapper to reveal some text inside another rapper.
I've had a stab at it with the following CSS, to no avail. Here's my attempt thus far:
Fiddle
Here's what I was trying to do with CSS:
/* My attempt */
#assotxt {
display: none;
}
#assodiv:hover ~ #assotxt {
display: block !important;
background-color: white;
}
Javascript may be the way to go here, but I'm a bit of a novice in that regard.
Your help would be greatly appreciated.

Plain JS:
var assodiv = document.getElementById("assodiv"),
assotxt = document.getElementById("assotxt");
assodiv.onmouseover = function(e) {
assotxt.style.display = "block";
};
assodiv.onmouseout = function(e) {
assotxt.style.display = "none";
};
insert this in a <script>-block on bottom of your body-tag

You can try this.
Add this to head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
Add this javascript:
var asso = $('#asso');
asso.on('mouseenter',function(){
$('.diagramTextWrapper').prepend('<p class="wrapper_text">test</p>');
});
asso.on('mouseleave',function(){
$('.wrapper_text').remove();
});

you can also hide and show your required div on hover event using jquery:
$(document).ready(function(){
$('#assodiv').on( "mouseenter",function() {
$('#assotxt').show();
$('#assotxt').css("background-color", "white");
$("#assotxt").appendTo($("#assotxt_target"));
});
$('#assodiv').on( "mouseleave",function() {
$('#assotxt').hide();
});
});
.btn {
text-decoration: none;
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 0 15px;
line-height: 32px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
width: 100px;
text-align: center;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 20px;
cursor: pointer;
}
.btn.blue {
background-color: #19ace4;
}
.btn.blue:hover {
opacity: 0.85;
}
.btn.pill {
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
/* - - - MOBLE VIEW - - - */
#media only screen and (max-width: 640px) {
.mobileViewDiagram {
display: block !important;
margin-left: auto;
margin-right: auto;
transform: scale(0.7);
margin-top: -50px;
margin-bottom: -50px;
}
.HybridDiagram,
#leftWrapper,
#rightWrapper {
display: none;
}
}
/* - - - DESKOTP VIEW - - - */
section {
width: 100%;
height: 476px;
margin: auto;
}
div#leftWrapper {
width: 50%;
height: 476px;
float: left;
}
div#rightWrapper {
margin-left: 50%;
height: 476px;
}
.diagramTextWrapper {
display: block;
margin: auto;
text-align: center;
padding-left: 50px;
padding-right: 50px;
padding-top: 20px;
}
.HybridDiagram {
width: 476px;
height: 476px;
}
.HybridDiagram img {
max-width: 100%;
position: absolute;
}
/* Associates */
.HybridDiagram img:nth-child(1) {
left: 0;
top: 0;
}
/* Staff */
.HybridDiagram img:nth-child(2) {
left: 244px;
top: 0;
}
/* Client */
.HybridDiagram img:nth-child(3) {
left: 38px;
top: 301px;
}
.mobileViewDiagram {
display: none;
}
#asso:hover,
#staff:hover,
#client:hover {
opacity: 0.85;
}
/* My attempt */
#assotxt {
display: none;
}
#assodiv:hover ~ #assotxt {
display: block !important;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Mobile View -->
<div class="mobileViewDiagram">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572caeb520c647e2e6e352e8/1462546101367/download.png">
</div>
<!-- Desktop View -->
<section>
<div id="leftWrapper">
<div class="HybridDiagram">
<!-- HOVER TO REVEAL TEXT -->
<div id="assodiv">
<img id="asso" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
</div>
<img id="staff" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img id="client" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>
</div>
<div id="rightWrapper">
<div id="assotxt_target"></div>
<div class="diagramTextWrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sapien sed risus suscipit cursus. Quisque iaculis facilisis lacinia. Mauris euismod pellentesque tellus sit amet mollis. Nulla a scelerisque turpis, in gravida enim. Pellentesque sagittis
faucibus elit, nec lobortis augue fringilla sed. Donec aliquam, mi in varius interdum, ante metus facilisis urna, in faucibus erat ex nec lectus. Cras tempus tincidunt purus, eu vehicula ante. Duis cursus vestibulum lorem.
Blue Button
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sapien sed risus suscipit cursus. Quisque iaculis facilisis lacinia. Mauris euismod pellentesque tellus sit amet mollis. Nulla a scelerisque turpis, in gravida enim. Pellentesque sagittis
faucibus elit, nec lobortis augue fringilla sed. Donec aliquam, mi in varius interdum, ante metus facilisis urna, in faucibus erat ex nec lectus. Cras tempus tincidunt purus, eu vehicula ante. Duis cursus vestibulum lorem.
Blue Button
</p>
<!-- HOVER SHOULD REVEAL THS TEXT -->
<div id="assotxt">
This should appear on top of existing text inside rightWrapper.
</div>
</div>
</div>
</section>

#assotxt is not a sibling of #assodiv; also :hover should be applied at .mobileViewDiagram element? You can use :hover:after at .mobileViewDiagram, with content set to text to be displayed. Use top, left properties to render text at appropriate position in viewport.
.mobileViewDiagram:hover:after {
display: block !important;
background-color: white;
content:"This should appear on top of existing text inside rightWrapper.";
position:absolute; /* use `top`, `left`, `right` to set position of `content` */
}
jsfiddle https://jsfiddle.net/vhswx2jg/2/

accordion code not working properly, how to fix it?

I am trying to make my own accordion for my portfolio page template, for my website. xtractweb.com as once any one click the accodion respective work-snippet will be shown etc ... for now i am trying with this demo but i stuck in middle.
The code i am currently using is given below:
Html code snippet:
<div class="accordion-content">
<ul>
<li class="current">
<h3>Donec at neque eget lacus lobortis molestie</h3>
<div class="content current">
<p>Nulla risus orci, viverra nec lacinia at, aliquam vel justo. Phasellus felis purus, placerat vel augue vitae, aliquam tincidunt dolor. Sed hendrerit diam in mattis mollis. Donec ut tincidunt magna. </p>
</div>
</li>
<li class="">
<h3>Phasellus felis purus, placerat vel augue vitae</h3>
<div class="content" style="display: none;">
<p>Nulla risus orci, viverra nec lacinia at, aliquam vel justo. Phasellus felis purus, placerat vel augue vitae, aliquam tincidunt dolor. Sed hendrerit diam in mattis mollis. Donec ut tincidunt magna. </p>
</div>
</li>
</ul>
</div>
and here is the jquery code:
$('.accordion-content ul li h3').click(function(){
var parent = $(this).parent('li');
if(parent.hasClass('current')){
$(this).next('div').slideUp();
parent.removeClass('current');
//$(this).parent('li').children('.content').slideUp();
}
else
{
parent.siblings().children('div').stop(true,true).slideUp();
parent.addClass('current');
parent.siblings().removeClass('current');
$(this).next('div').slideDown();
$(this).parent('li').addClass('current');
//$(this).parent('li').children('.content').slideDown();
}
});
while all my css showing the work good ... the problem is that once i click the h3 it shows the div content, but once i click another h3 quickly than old div shown, it destroys the whole process and results not shows as i want... any one suggest me what to do now or any easier method than that ... ?
here is the css code snippet:
.accordion-content {
li {
margin-bottom: 10px;
border: 1px solid #dedede;
background: #ececec url("../images/plus-minus.png") no-repeat;
background-position: 96% 45%;
background-width: 8px;
background-height: 10px ;
&.current {
background: #ececec url("../images/minus.png") no-repeat;
background-position: 96% 11%;
}
}
h3 {
font-size: 16px;
font-family: 'open sans', sans-serif;
text-align: left;
color: #2c2725;
padding: 10px 0 10px 20px;
&:hover {
cursor: pointer;
}
}
.content {
width: 100%;
background: #ffffff;
padding: 10px 0 10px 0;
text-align: center;
display: none;
text-align: left;
padding: 15px;
padding-bottom: 55px;
p {
font-size: 14px;
line-height: 24px;
color: #7f8281;
}
}
.current {
display: block;
}
}
Regards

the problem is not there as i fell, just look at the code snippet in jsfidle http://jsfiddle.net/gkQ3Y/1/ your results looking cool. what else you think you want ? the only change which i feel is that, you should add
.stop(true,true)
to make your accordion load properly, as you just clicks early than it loads and results looks different than you expect.
so, your new code snippet will look like shown below:
$('.accordion-wrapper .accordion-content ul li h3').click(function(){
var parent = $(this).parent('li');
if(parent.hasClass('current')){
$(this).next('div').stop(true,true).slideUp();
parent.removeClass('current');
//$(this).parent('li').children('.content').slideUp();
}
else
{
parent.siblings().children('div').stop(true,true).slideUp();
parent.addClass('current');
parent.siblings().removeClass('current');
$(this).next('div').stop(true,true).slideDown();
$(this).parent('li').addClass('current');
//$(this).parent('li').children('.content').slideDown();
}
});
i hope it will be making every thing fine right now, and your whole code is enough to do the work, while just these two lines will do the rest of the work now.
Regards

Here is the might help you.
jQuery Code
$('.accordion-content').find('h3').click(function(){
$('.content').slideUp(); // Hide all content.
$(this).next().slideDown(); // show current clicked heading detail
$(this).parent().addClass('current').siblings('li').removeClass('current'); // add current class to current clicked heading and remove from another heading.
});
Fiddle Demo

Unusual shape of a textarea?

Usually textareas are rectangular or square, like this:
But I want a custom-shaped textarea, like this, for example:
How is this possible?

Introduction
First, there are many solutions, proposed in other posts. I think this one is currently (in 2013) the one which can be compatible with the largest number of browsers, because it doesn't need any CSS3 properties. However, the method will not work on browsers which doesn't support contentdeditable, be careful.
Solution with a div contenteditable
As proposed by #Getz, you can use a div with contenteditable and then shape it with some div on it. Here is an example, with two blocks which float at the upper left and the upper right of the main div:
As you can see, you have to play a little with the borders if you want the same result as you requested in your post. The main div has the blue border on every side. Next, red blocks has to be sticked to hide top borders of the main div, and you need to apply border to them only on particular sides (bottom and left for the right block, bottom and right for the left).
After that, you can get the content via Javascript, when the "Submit" button is triggered for example. And I think you can also handle the rest of the CSS (font-size, color, etc.) :)
Full code sample
.block_left {
background-color: red;
height: 70px;
width: 100px;
float: left;
border-right: 2px solid blue;
border-bottom: 2px solid blue;
}
.block_right {
background-color: red;
height: 70px;
width: 100px;
float: right;
border-left: 2px solid blue;
border-bottom: 2px solid blue;
}
.div2 {
background-color: white;
font-size: 1.5em;
border: 2px solid blue;
}
.parent {
height: 300px;
width: 500px;
}
<div class="parent">
<div class="block_left"></div>
<div class="block_right"></div>
<div class="div2" contenteditable="true">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
</div>
</div>

In the near future we can use so called css-shapes to achieve this. A div with the contenteditable attribute set to true combined with css-shapes can make a text area any kind of shape.
Currently Chrome Canary already supports css-shapes. An example what is possible with css-shapes is:
Here they are using a polygon shape to define the text-flow. It should be possible to create two polygons to match the shape you want for your textarea.
More information about css-shapes has been written at: http://sarasoueidan.com/blog/css-shapes/
To enable css-shapes in Chrome Canary:
Copy and paste
chrome://flags/#enable-experimental-web-platform-features into the
address bar, then press enter.
Click the 'Enable' link within that
section.
Click the 'Relaunch Now' button at the bottom of the
browser window.
from: http://html.adobe.com/webplatform/enable/
.container {
overflow: hidden;
shape-inside: polygon(200.67px 198.00px, 35.33px 198.47px, 34.67px 362.47px, 537.00px 362.74px, 535.67px 196.87px, 388.33px 197.00px, 386.67px 53.53px, 201.33px 53.53px);
font-size: 0.8em;
}
/** for red border **/
.container:before {
content: '';
position: absolute;
top: 8px;
left: 8px;
width: 190px;
height: 190px;
background-color: white;
border-right: 1px solid red;
border-bottom: 1px solid red;
}
.container:after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 190px;
height: 190px;
background-color: white;
border-left: 1px solid red;
border-bottom: 1px solid red;
}
<div class="container" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis diam lacus, id lacinia quam interdum quis. Ut vitae dignissim lorem, nec lobortis turpis. Fusce non fringilla nulla, eu blandit urna. Nulla facilisi. Nunc tristique, mauris vitae
tincidunt egestas, eros metus dapibus sapien, quis tincidunt sem dui ac purus. Morbi lobortis, quam sit amet consequat aliquam, elit mi rutrum erat, id tempus turpis turpis et sem. Vivamus tempor mollis porttitor. Sed elementum nisl sit amet sapien
auctor imperdiet. Sed suscipit convallis nisi, in dignissim risus placerat suscipit. Sed vel lorem eu massa vulputate pretium. Nulla eget dolor sed elit gravida condimentum non vel lorem. Vivamus pretium, augue sed aliquet ultricies, neque nibh porttitor
libero, a tristique elit mi eu nibh. Vestibulum erat arcu, condimentum eleifend adipiscing ut, euismod eu libero. In pharetra iaculis lorem, at consectetur nisi faucibus eu.
</div>
Polygon created with: http://betravis.github.io/shape-tools/polygon-drawing/
Result
http://jsfiddle.net/A8cPj/1/

Maybe it's possible with Content Editable ?
It's not a textarea, but if you succeed to create a div with this shape, it could work.
I think it's not possible with just textarea...
A little example: http://jsfiddle.net/qgfP6/5/
<div contenteditable="true">
</div>

You could work with a contenteditable div, with two corners divs:
<div style="border:1px blue solid ; width: 200px; height: 200px;" contenteditable="true">
<div style="float:left; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
<div style="float:right; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
hello world, hello worldsdf asdf asdf sdf asdf asdf
</div>

You could also do this with CSS Regions
With Regions, you can use CSS properties to flow content into existing
styled containers, specifying any container order you choose,
regardless of their position on the page.
(Web Platform)
[Currently supported in WebKit Nightly, Safari 6.1+ and iOS7 and already usable in chrome and opera after enabling the flag: enable-experimental-web-platform-features - caniuse, Web Platform ]
FIDDLE
So you could make that textarea shape by flowing the text through 2 regions, and edit it by adding contenteditable on the content.
Markup
<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="content" contenteditable>text here</div>
(Relevant) CSS
#content {
-ms-flow-into: article;
-webkit-flow-into: article;
}
.region {
-ms-flow-from: article;
-webkit-flow-from: article;
box-sizing: border-box;
position: absolute;
width: 200px;
height: 200px;
padding: 0 1px;
margin: auto;
left:0;right:0;
border: 2px solid lightBlue;
}
#box-a {
top: 10px;
background: #fff;
z-index: 1;
border-bottom: none;
}
#box-b {
top: 210px;
width: 400px;
overflow: auto;
margin-top: -2px;
}
The result:
For more info about regions - here's a good aricle: CSS3 regions: Rich page layout with HTML and CSS3

A long line of text in the box will drop the cursor down past the middle edges and I can't seem to fix that.
**[Fiddle Diddle][1]**
#wrap {
overflow: hidden;
}
#inner {
height: 350px;
width: 500px;
border: 1px solid blue;
}
#textContent {
word-wrap: break-word;
word-break: break-all;
white-space: pre-line;
}
#left, #right {
height: 50%;
width: 25%;
margin-top: -1px;
padding: 0;
border: 1px solid blue;
border-top-color: white;
margin-bottom: 5px;
}
#right {
margin-left: 5px;
float: right;
margin-right: -1px;
border-right-color: white;
}
#left {
margin-right: 5px;
float: left;
margin-left: -1px;
border-left-color: white;
}
<div id="wrap">
<div id="inner">
<div id="left"></div>
<div id="right"></div>
<span id="textContent" contenteditable>The A B Cs</span>
</div>
</div>
[1]: http://jsfiddle.net/yKSZV/

That's not possible sire! A textarea is generally a rect or square box, where you can type in.
However, to make something like that you can use 2 textarea's and then give them a specified width and height. Otherwise I don't think its gonna happen!
Second method would be to make an editable element.
http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/
The code is:
<div contenteditable="true">
This text can be edited by the user.
</div>
Using this, you can make any element editable! You can give dimensions to it, and it will work! You will get it just as a textarea.
Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

If you combine CSS shapes with contenteditable this can be done in webkit browsers.
First you have to enable the flag: enable-experimental-web-platform-features
Then restart your webkit browser and then check this FIDDLE out !
This method will work for non-standard shapes as well.
Markup
<div class="shape" contenteditable="true">
<p>
Text here
</p>
</div>
CSS
.shape{
-webkit-shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
width: 400px;
height: 400px;
text-align: justify;
margin: 0 auto;
}
So how on earth did I get that polygon shape?
Go to this site and make your own custom shape!
Notes about enabling the flag:
(from here)
To enable Shapes, Regions, and Blend Modes:
Copy and paste
chrome://flags/#enable-experimental-web-platform-features into the
address bar, then press enter. Click the 'Enable' link within that
section.
Click the 'Relaunch Now' button at the bottom of the browser
window.

You can use Google web designer tool for creating complex shapes using HTML5-canvas and CSS.
More over you will get other tools like typing tools to enter texts inside these shapes.
As the output file contains much code, providing a fiddle of a sample demo created using Google Web Designer tool
FIDDLE DEMO>>

If, for whatever reason, you really need to support browsers that don't have contenteditable, you could probably do the same thing in JavaScript, by using events, although this is a very messy workaround.
Pseudocode:
focused=false;
when user clicks the div
{
focused=true;
}
when user clicks outside the div
{
focused=false;
}
when user presses a key
{
if (focused)
{
add character of key to div.innerHTML;
}
}

JavaScript animate resizing div

I'm trying to put a small animation on a page. I've got 2 divs side by side, the second of which has its content called via Ajax, so the div height varies without page refresh.
<div id="number1" style="float:left; padding-bottom:140px">Static content, 200px or so</div>
<div id="number2" style="float:left">AJAX content here</div>
<div style="clear:left"></div>
<img src="image" margin-top:-140px" />
This basically gives me a 2 column layout, and the image nests up underneath the left hand column no matter what the height. All good!
The thing I'm trying to do though is animate the transition of the image when the page height changes thanks to incoming Ajax content. At present the image jerks around up and down, I'd quite like to have it smoothly glide down the page.
Is this possible? I'm not really into my JavaScript, so I'm not sure how to do this. I'm using the jQuery library on the site, so could that be a way forward?

OK, I've just put together a very quick and dirty example.
Here's the HTML:
<body>
Add content
<div id="outerContainer">
<div id="left" class="col">
<p>Static content</p>
<img src="images/innovation.gif" width="111px" height="20px">
</div>
<div id="right" class="col">
<p>Ajax content</p>
</div>
</div>
</body>
The jQuery used is here
jQuery(function($){
var addedHTML = "<p class='added'>Lorem ipsum dolor sit amet, Nunc consectetur, magna quis auctor mattis, lorem neque lobortis massa, ac commodo massa sem sed nunc. Maecenas consequat consectetur dignissim. Aliquam placerat ullamcorper tristique. Sed cursus libero vel magna bibendum luctus. Nam eleifend volutpat neque, sed tincidunt odio blandit luctus. Morbi sit amet metus elit. Curabitur mollis rhoncus bibendum. Phasellus eget metus eget mi porttitor lacinia ac et augue. Nulla facilisi. Nam magna turpis, auctor vel vehicula vitae, tincidunt eget nisl. Duis posuere diam lacus.</p>";
$("#addContent").click(function(e){
$("#right").append(addedHTML);
var rightHeight = $("#right").height();
//Animate the left column to this height
$("#left").animate({
height: rightHeight
}, 1500);
});});
And CSS:
#outerContainer {
position: relative;
border: 1px solid red;
margin: 20px auto 0;
overflow: hidden;
width: 400px;}
.col {
width: 180px;
display: inline;
padding: 0 0 40px;}
#left {
float: left;
border: 1px solid cyan;
position: relative;}
#left img {
position: absolute;
bottom: 0;
left: 0;}
#right {
position: absolute;
top: 0;
left: 180px;
border: 1px solid green;}
#addContent {
text-align: center;
width: 100px;
margin: 20px auto 0;
display: block;}
I have added a button just to add some 'Ajax' content. When you do this it grabs the new height of the div and animates to that height. You could add some easing to the animation / change the speed to make it a little more polished.
I hope this helps.

Maybe you could use a container around the content divs (with overflow hidden) and resize that one according to the height of the contents, thus achieving what you're trying to do?

I agree with the answer above. You could apply the image as a background image to the container then animate the container. That way the background image will move down with the container (assuming you anchor it to the bottom that is!)