two rounded borders boxes in a row?

Problem

<style>
#firstname
{
border: 2px solid #3b5998;
padding: 10px 40px;
width: 100px;
background: #daf0ff;

}
</style>
</head>
<body>

<p id="firstname">This is a box,This is a box,This is a box,This is a box,This is a box, </p><p id="firstname">This is a box,This is a box,This is a box,This is a box,This is a box,</p>

after viewing it on bowser it is showing boxes in different rows....how to bring them in same row ?

Problem courtesy of: user1949991

Solution

Use float: left or display: inline-block on your <p /> tags.

Explanation:
You are using block elements here (<p />). They will always force a line break except if you float them. You could use inline elements (such as <span/> to display them side by side but that would break the padding. So either float them or us the hybrid display: inline-block

Solution courtesy of: Horen

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.