Question

I’ve read dozens of posts on this topic, but everyone else is having horizontal overflow issues whereas mine are vertical and solutions like floating, clearing, and overflow param setting seem not to work. Here is the code:

HTML:

        <div style="padding:25px">
                              <? $pieces = explode("|",$row['comments']); foreach ($pieces as $comment) { $comment = explode("~",$comment); ?>
                                <div class="commentdiv" style="padding:10px;border-radius: 5px; position:relative; float:left; width:100%; margin-bottom:25px; background-color:#FFF;"> 
                                    <div class="commentcover" style="clear:both">Written by <i><? echo $comment[1]; ?></i> on <b><? echo $comment[2]; ?></b></div>
                                    <div class="commentholder" style="clear:both"><? echo $comment[0]; ?></div>
                                    <div style="clear:both"></div>
                                </div>
                              <? } ?>
        </div>

CSS:

.commentcover {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 90%;
    z-index: 500;

    padding:10px;
    background-color: #fff;
    opacity: 0;
    filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0);
    border-radius: 5px;
    text-align:center
}

.commentholder {
    position:absolute; top:10px; left:5%; z-index:400; width:90%;
}

I’ve been playing with this for quite some time without too much success.. and I don’t want to slap scroll bars on there :/

Here is a link to what I’m working on – the table entry is expanded to reveal multiple separate comments. Mouseover results in the covering div fading in over the comment with an indication of the date and author of the comment. Just toggle open the top table row and mouseover the comments to see what I’m talking about (not working in IE of course). Right now the comment boxes are a set height, but this is not an ideal solution. You can see the longest comment is already overflowing a bit.

What do you guys think?

Answer 1

Providing a position of absolute is taking the commentholder out of the normal flow of the document. As such, commentdiv, is pretending it is not there, so the text is “overflowing” the containing commentdiv.

absolute

An element with position: absolute is taken out of the normal flow of the page and positioned at the desired coordinates relative to its containing block.

Since the absolutely positioned element is taken out of the normal flow, the normal document flow behaves as if the element is not there: it closes up the space it would take.

reference: http://www.quirksmode.org/css/position.html

EDIT:

I’m not exactly sure what overlap you are trying to achieve, but this CSS will set commentcover over commentholder. I’ve removed opacity:0 to show how it will look. And I left the other styles as close to the original as possible.

.commentdiv {
    padding:10px;
    border-radius: 5px;
    float:left; /* because the children are floated, floating the parent so height changes */
    width:100%; 
    margin-bottom:25px; 
    background-color:#FFF;
}

.commentcover {
    position:relative; /* so z-index still works */
    width: 90%;
    margin:0 auto;
    z-index: 500;
    padding:10px;
    background-color: #fff;
    border-radius: 5px;
    text-align:center;
}

.commentholder {
    position:relative; /* so z-index works */
    float:left;
    z-index:400; 
    width:90%;
    margin-top:-2em;
}