CODEWITHSUNDEEP
htmlcss
Kevin Kesicki
Kevin Kesicki

Reputation: 165

CSS Align Paragraphs Horizontally

I have several paragraphs under a certain class that I want to align horizontally. Basically, I want each paragraph to have its own column.

I used float: right;. which made them into columns, but then it brought them out of formatting with the rest of the webpage.

Any tips on different ways to create columns, or to format with float would be appreciated.

Upvotes: 0

Views: 5141

Answers (1)

robbclarke
robbclarke

Reputation: 749

You could always use CSS columns.

div
{
   -webkit-column-count:3; /* Chrome, Safari, Opera */
   -moz-column-count:3; /* Firefox */
   column-count:3;
   -webkit-column-gap:40px; /* Chrome, Safari, Opera */
   -moz-column-gap:40px; /* Firefox */
   column-gap:40px;
}

From W3schools.

Or you could do it with list items if you're always going to have control over the text.

HTML

<ul>
    <li>paragraph</li>
    <li>paragraph</li>
    <li class="last">paragraph</li>
</ul>

CSS

ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    float: left;
    width: 30%
    margin-right: 5%;
}

ul li.right {
    margin-right: 0;
}

Upvotes: 1

Related Questions