Search code examples
htmlcssalignmentword-wrap

Responsive wrapping alignment

I am looking to achieve the following effect using CSS:

Browser is wide enough to fit text:    | left text             right text |
Browser isn't wide enough to fit text: |    left text    |
                                       |   right text    |

When the browser is wide enough to fit the text (not wrapped), the left text is aligned to the left and the right text is aligned to the right. When the browser gets smaller than the width of the left text and the right text (would normally force the text to wrap), I want the right text to move beneath the left text and for them both to be centred. Is this only possible with media queries?

I've tried applying display: table to a parent div and then putting display: table-cell on the left and right text elements, however I ended up with the following:

| left   right | (text has wrapped on it's own side)
| text    text |
Solution

  • You make it using media queries

    .left-text {float: left;}
.right-text {float: right;}


/*You set break point according to your requirement*/

@media only screen and (max-width: 768px) {
.left-text {float: none; text-align:center;}
.right-text {float: none;  text-align:center;}
}