CODEWITHSUNDEEP
htmlcss
TimonSeldenrijk
TimonSeldenrijk

Reputation: 509

Why are my <p> and <div> elements not obeying display: inline?

HTML:

<div id="demo">
<p id="p">blablabla</p>
<div id="d">zizizizi</div>
</div>

CSS:

#demo {
    width: auto;
}
#p {
    float: left;
    display: inline;
}
#d {
    float: right;
    display: inline;
}

I have created a JSBin for this to show the output:

JSBIN

I want this:

[blablabla]    [zizizizi]

Instead of that, it shows: 

               [zizizizi]
[blablabla]

Does anyone know the reason for this? And how to fix this?

Upvotes: 0

Views: 91

Answers (4)

Douglas
Douglas

Reputation: 37763

The <p> has a default 1em margin which causes it to move down.

Also, the display: inline will have no effect, since it is overridden by the float style.

Upvotes: 3

n1kkou
n1kkou

Reputation: 3142

Just remove the floats and replace the display:inline with display:inline-block. Then remove default margins and you have elements properly aligned, you need only to add padding/margins as you wish:

#p, #d{display: inline-block; vertical-align:top; margin:0; }

Upvotes: 0

smartcat
smartcat

Reputation: 1

To fix this, make both elements float:left

this will automatically add every consecutive element next in line.

Here is how I would do it

HTML

<div class="box">
Content of box 1
</div>
<div class="box">
Content of box 2
</div>

CSS:

.box{ float:left; display:inline}

you can add width css property if you want to set the width of each object as well

Upvotes: 0

Harutyun Abgaryan
Harutyun Abgaryan

Reputation: 2023

USe this css set padding:0px; and margin:0px; in 

#demo {width: auto;}
#p {float: left; 
display: inline;padding:0px; margin:0px;}
#d {float: right;
display: inline; margin:0;padding:0;}

Upvotes: 0

Related Questions