Why is p tag pushing down parent div?

Question

I have two divs taking up half of the screen each. When I add a p tag inside the second div, it pulls it down. Why is this happening? I creating an html email so I have to use only inline styling and can't reference outside stylesheets with grid systems.

Here is an example: https://jsfiddle.net/jzcxhp2L/1/

<div>
  <div style="display: inline-block; width: 49%; height: 300px; border: 1px solid black;"></div>
  <div style="display: inline-block; width: 49%; height: 300px; border: 1px solid black;">
    <p>Lorem ipsum dolor</p>
  </div>
</div>

For email html you're probably better off using tables rather than divs. — McVenco, Nov 10 '17 at 21:31

score 0 · Answer 1 · answered Nov 10 '17 at 21:34

0

just add float:left; to them and add the margin value you desire .

    <div>
        <div style="display: inline-block; float: left; margin: 5px; width: 49%; height: 300px; border: 1px solid black;"></div>
        <div style="display: inline-block;float: left;margin: 5px; width: 49%; height: 300px; border: 1px solid black;">
            <p>Lorem ipsum dolor</p>
        </div>
    </div>

answered Nov 10 '17 at 21:34

samehanwar

3,280
2
23
26

1

"Why is this happening?" – showdev Nov 10 '17 at 21:38

score 0 · Answer 2 · answered Nov 10 '17 at 21:35

0

Add float:left; to your styles. Also, if you are assigning some border, its better to use box-sizing:border-box; This will not let the border affect the element width.

Hope this helps

answered Nov 10 '17 at 21:35

Rajan Benipuri

1,772
1
9
21

1

"Why is this happening?" – showdev Nov 10 '17 at 21:38

score 0 · Accepted Answer · answered Nov 10 '17 at 21:42

<p> is a block element and you're nesting it inside an inline element. That's not supposed to happen and is causing the layout issue. Block elements will create a new line.

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

This layout might work better for you. https://jsfiddle.net/jzcxhp2L/7/

<div style="display: flex; height: 300px; width: 95vw; margin:0 auto;">
  <div style="border: 1px solid black; height: 300px; flex:1;">
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
  </div>
  <div style="border: 1px solid black; height: 300px; flex:1;">
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    </div>
</div>

score 0 · Answer 4 · edited Nov 10 '17 at 21:44

0

<p> has his own margin

try to put the margin-top and/or bottom to 0px

p {
    margin-top: 0px ;
    margin-bottom: 0px ; 
}

or try to give your <p> tag a class with display = inline

.class-inline {
    display: inline ; 
}

or use inline style:

<p style="display: inline">

edited Nov 10 '17 at 21:44

cнŝdk

31,391
7
56
78

answered Nov 10 '17 at 21:42

Jean-Philippe Novitz

1
1
2

Why is p tag pushing down parent div?

4 Answers4