CODEWITHSUNDEEP
htmlcsstextposition
Jgoodwyn
Jgoodwyn

Reputation: 152

Can you put two separate p tags on the same line and still edit them separately

So I have a horizontal bar on my page and I want to put several <p> tags on that bar so that when I, later down the road, want to start to make a responsive layout, can have them removed when reaching a specific screen size. But what I want to know is how can I put these p sections on the same line without pushing one down underneath the containing section? I've used display:inline and float: left but I dont like that because you can't format the text to be text-align: right or have it be a specific distance from the left side of the screen. For example, if you put margin-left: 6% it wont be 6% away from the left side of the screen, it will be 6% away from the element before it and I don't want that. I'm assuming the overall outcome will be absolute positioning but I want to see if there were any other options first.

Upvotes: 0

Views: 8110

Answers (3)

NoobEditor
NoobEditor

Reputation: 15891

give display:inline-block; to your p class and a proper width and they will come in one line, having display:inline remove the option of giving dimension to the element! do it this way :

demo here

p {
    height:100%;
    width:50%;
    display:inline-block;
    border:1px solid red;
}

Upvotes: 2

immayankmodi
immayankmodi

Reputation: 8580

Try display:inline and give paddings as you like just as like this:

p{
    display:inline;
    padding:5px;
}

here is a demo: http://jsfiddle.net/gyHXx/

Upvotes: 0

dtjokro
dtjokro

Reputation: 122

display:inline-block is the key

the main difference in between inline and inline-block is that, inline-block allows you to specify the dimensions, paddings, and margins of the element whereas inline block simply wraps the element.

Upvotes: 1

Related Questions