CODEWITHSUNDEEP
htmlcss
Rahul Kapoor
Rahul Kapoor

Reputation: 145

How to align p tag side by side using css?

i am currently having a problem aligning p tag in a div side by side here is my code:-

<div class="div_right">
<div style="background-color: #EEEEF1; width:300px; padding:20px 30px;">
<p><img class="_51sw img" alt="" src="https://www.facebook.com/images/profile/timeline/app_icons/info_24.png" alt="SJT" title="SJT"> About <?php echo $name; ?></p><hr>
<p style="font-weight:bold;">Tagline</p>
<?php echo $tagline; ?>
<p style="font-weight:bold;">School</p>
<?php echo $school; ?>
<p style="font-weight:bold;">Core Commitee Member</p>
<?php echo $member; ?>
<p style="font-weight:bold;">Bragging Rights/Achievements</p>
<?php echo $brag; ?>

</div>

But i want to put tagline and school in one column side by side and in another just below it core commitee and bragging rights side by side and i don't know how to do it.

Upvotes: 0

Views: 1972

Answers (2)

cнŝdk
cнŝdk

Reputation: 32145

You can achieve it simply using a display:table-cell with all your <p> elements :

p {
    display: table-cell;
}
<div style="background-color: #EEEEF1; width:3000px; padding:20px 30px;">
<p><img class="_51sw img" alt="" src="https://www.facebook.com/images/profile/timeline/app_icons/info_24.png" alt="SJT" title="SJT"> About <?php echo $name; ?></p><hr>
<p style="font-weight:bold;">Tagline</p>
<?php echo $tagline; ?>
<p style="font-weight:bold;">School</p>
<?php echo $school; ?>
<p style="font-weight:bold;">Core Commitee Member</p>
<?php echo $member; ?>
<p style="font-weight:bold;">Bragging Rights/Achievements</p>
<?php echo $brag; ?>

</div>

Upvotes: 1

Johnathan Ralls
Johnathan Ralls

Reputation: 141

set your DIV to have it's display as table, or table row. then each

should be displayed as a table cell.can all be done in css, classes would help!

Upvotes: 0

Related Questions