i need a 2 column layout | Sololearn: Learn to code for FREE!
Novo curso! Todo programador deveria aprender IA generativa!
Experimente uma aula gr√°tis
0

i need a 2 column layout

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?

2nd May 2017, 1:57 AM
steve
6 Respostas
+ 4
Flex has so much of nice features. Sorry IE, that's a deal breaker. ūüėÖ
2nd May 2017, 11:10 AM
Calvi’≤
Calvi’≤ - avatar
+ 4
Hahaha! Yep. I think it's a general agreement that IE just needs to die.
2nd May 2017, 11:13 AM
Mike
Mike - avatar
+ 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>
2nd May 2017, 3:07 AM
Calvi’≤
Calvi’≤ - avatar
+ 3
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 ūüėÜ?
2nd May 2017, 10:30 AM
Mike
Mike - avatar
+ 2
<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.
2nd May 2017, 2:21 AM
Mike
Mike - avatar
0
thanks
2nd May 2017, 2:39 AM
steve