Question

I have quite simple markup:

<div id="container">
    <div id="content"></div>
    <div id="ta-container">
        <div id="gripper"></div>
        <textarea></textarea>
    </div>
</div>​

And I style it like a basic chat window might look. Please see the code here: http://jsfiddle.net/pavek/rdxN5/3/

This looks perfectly well in FF, Chrome, IE, but not in Opera (12.11, the latest now). The most confusing thing is how two absolutely positioned elements within container affect each other — I cannot comprehend that.

I’d like to see possible solutions for this issue. Note: I prefer to avoid manipulating the height of div#content.

Answer 1

I don’t have the why for you, but you can correct it by doing away with the margins and make the top/right/bottom/left properties reflect where you want the edges placed:

http://jsfiddle.net/rdxN5/4/

#content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
    margin: 5px 5px 0 5px;
    border: 1px solid red;
}

This is just a rough adjustment, you’ll have to do a little fine-tuning on your own to get it to where it should be.