CODEWITHSUNDEEP
csshtmloverflow
Samuel Stiles
Samuel Stiles

Reputation: 2186

Why is this paragraph element overflowing over a div below it? And why is that div staying in place?

http://cowperthwaite.dev.mybusinessadmin.com/location/51656/103_carman_avenue/

On that page you can see that the yellow background box below is staying in place, and the paragraph is exploding on top of it. I can't for the life of me figure out why this is happening. The box with the yellow background isn't set to position:absolute; or anything. None of those parts are... and yet the paragraph is still overflowing regardless.

Here's the HTML:

<div class="descriptionMap">
    <div class="leftcolumn">
        <h1><?php echo $address; ?></h1>
        <p><?php echo nl2br($description) ?></p>
    </div>
    <div class="rightcolumn">
        <?php echo($googleMapEmbedCode); ?>
    </div>
</div>
<div class="pictureBoxContainer">
    <div class="pictureBox">
        <div class="pBoxLeftColumn">
            <?php
                echo "<div class='pBoxLargeImageContainer'>";
                echo "<img src='$pictureLinks[0]' id='largeImage' alt='Primary Image' class='pBoxLargeImage'>";
                echo "</div>";
            ?>
        </div>
        <div class="pBoxRightColumn">
            <?php
            foreach ($pictureLinks as $picture)
            {
                echo "<div class='pBoxSmallImageContainer'>";
                echo "<img src='$picture' alt='Thumbnail' class='pBoxSmallImage'>";
                echo "</div>";
            }
            ?>
        </div>
    </div>
</div>

Here's the CSS:

.leftcolumn {
    float:left;
    max-width: 50%;
    display:inline-block;
    overflow:scroll;
}

.rightcolumn {
    float:right;
    max-width: 50%;
    display:inline-block;
}

.pictureBoxContainer {
    padding: 12px;
    clear:left;
    clear:right;
    width: 100%;
    background-color: #F7D961;
    border-radius: 12px;
    max-height: 350px;
    min-height: 325px;
}

.pictureBox {
    background-color: #FFF;
    border-radius: 12px;
    width: 97%;
    overflow: auto;
    padding: 12px;
    max-height: 300px;
    min-height: 299px;
}

.pBoxLeftColumn {
    display: block;
    left: 25px;
    max-width: 49.99%;
    min-width: 49.99%;
    position: absolute;
    top: 25px;
}

.pBoxRightColumn {
    display: block;
    float: right;
    min-width: 49.99%;
    max-width: 49.99%;
    overflow: auto;
}

.pBoxSmallImageContainer {
    height: 103px;
    width: 145px;
    float: left;
    padding: 3px;
    margin: 3px;
    background-color: #F7D961;
    border-radius: 2px;
    position: relative;
}

.pBoxSmallImage {
    max-height: 95px;
    max-width: 138px;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.pBoxLargeImageContainer {
    width: 100%;
}

.pBoxLargeImage {
    border-radius: 6px;
    min-width: 450px;
    max-height: 300px;
}

Any ideas? What am I missing here?

Upvotes: 0

Views: 749

Answers (1)

staircasebug
staircasebug

Reputation: 144

<div class="descriptionMap clearfix">

.clearfix class will clear your floats within the descriptionMap container.

Upvotes: 1

Related Questions