CODEWITHSUNDEEP
htmlcsslayout
Mike
Mike

Reputation: 355

Why is my Layout Breaking when Inserting Content into Div Container (HTML CSS)

I have a simple 3 colum layout.

Whenever I insert content or images into one of the three columns, a weird margin appears either on top or bottom and the layout breaks.

Is this because I do not have a Normalizer?

JSFIDDLE

<div class="e-container">

    <div class="edate">
        <!-- Content -->
    </div>

    <div class="eimage">   
         <!-- When I add this it breaks
        <img src="http://www.keenthemes.com/preview/metronic/theme/templates/admin/form_image_crop.html" width="300" height="200">-->
    </div>

    <div class="einfo">
        <!-- Content -->
    </div>
</div><!-- Container -->

CSS

.e-container {width: 100%;
border: 1px solid black;
height: auto;
text-align: center;}

.edate {
    width: 8em;
    height: 200px;
    border: 1px solid black;
    margin: 1em;
    display: inline-block;
}

.eimage {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    display: inline-block;
    position: relative;
    margin: 1em;
}

.einfo {
    width: 28em;
    height: 200px;
    display: inline-block;
    position: relative;
    border: 1px solid black;
    margin: 1em;
}

hr {width: 20%;}

Screenshots

This is what the layout is like without the divs holding any content... Before Content here

The moment I add any content into any of the 3 divs... After content is added.

Upvotes: 1

Views: 1665

Answers (1)

timothy.burgher
timothy.burgher

Reputation: 96

1) I played around with the fiddel and noticed that if you make the img display:block the problem goes away. If your image is too tall it will still go outside of the box but other than that it works fine.

You have a set height on the DIV's so that's why the image breaks out of the box. If you remove that height it's okay.

2) Putting vertical-align: top also fixes it. Found that here: Why does this inline-block element have content that is not vertically aligned

Upvotes: 1

Related Questions