CODEWITHSUNDEEP
cssoperamargin
pavek
pavek

Reputation: 307

Opera (only) - margin of absolutely positioned child element pushes it up the next sibling, also absolutely positioned

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.

Upvotes: 0

Views: 755

Answers (2)

Louis
Louis

Reputation: 1084

use the Opera hack.

but, why are you using absolute position for that?

try this: http://jsfiddle.net/liccyfuentes/KbxJK/

HTML: ​ ​ CSS: * { -moz-box-sizing: border-box; box-sizing: border-box; }

#container {
    margin: 20px;
    width: 200px;
    padding:5px;
    min-height: 300px;
    border: 1px solid blue;
    float:left;            
}

#main-content {
    min-height:248px;
    border:1px solid red;
    float:left;
    width:188px;
}
textarea {
    float:left;
    width:188px;
    margin-top: 5px;
    resize: none;
    border: 1px solid green;
}
​

Upvotes: 0

cimmanon
cimmanon

Reputation: 68319

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.

Upvotes: 1

Related Questions