i need a 2 column layout

Question

i want to make a div of 700px with two paragraphs in two columns ,the first at the left and the second at the right end .I tried to make with flex but the right paragraph does not move at the right .how can i fix it?

Answer 1

Flex has so much of nice features.
Sorry IE, that's a deal breaker.
😅

Answer 2

Hahaha! Yep. I think it's a general agreement that IE just needs to die.

Answer 3

You can use flex, below codes create 2 columns with width ratio 4:2

<div class="container" style="display:flex; flex-direction:row;">
<div class="main" style="flex:4;">
Main contents
</div>
<div class="sidebar" style="flex:2;">
Sidebar info
</div>
</div>

Answer 4

Good solution there as well Calvin. If you don't care about support for earlier versions of IE it's a great option. I mean, who cares about IE anyway 😆?

Answer 5

<div style="width:700px;>
<p style="width:50%; display: inline; block;">paragraph1</p><p> style="width: 50%: display: inline-block;">paragraph2 </p>
</div>

Add a border to the paragraphs if you want as well to see where they divide. If you're doing this in a real project then don't do inline styles. it's bad practice 😊

EDIT: flexbox is another option, but would not suggest it if creating page layouts. It can be used in conjunction with page layouts to structure elements inside a column, but I would recommend percentage based layouts if that's the approach you're taking here.

Answer 6

thanks