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

Question

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...

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

Can you show a screenshot of the problem. – Sleek Geek Aug 05 '15 at 17:04 — Sleek Geek, Aug 05 '15 at 17:04
Please elaborate on this "weird margin". – j08691 Aug 05 '15 at 17:10 — j08691, Aug 05 '15 at 17:10
You are inserting an html page as an image. – pool pro Aug 05 '15 at 17:11 — pool pro, Aug 05 '15 at 17:11

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

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

edited May 23 '17 at 12:19

Community

1
1

answered Aug 05 '15 at 17:11

timothy.burgher

86
1
4

I thought so too. But, what about for the Paragraph like i added in the screenshots on my question edit. Does the same apply? Should I just remove the height? – Mike Aug 05 '15 at 17:15
2

I updated my comment above with some stuff about vertical-align. Check it out. – timothy.burgher Aug 05 '15 at 17:20
The 'Vertical Align' Worked (Which i found weird being I thought you needed to display as table-cell for this to work). Does anybody know where this glitch comes from? – Mike Aug 05 '15 at 17:23

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

1 Answers1