i need a 2 column layout | Sololearn: Learn to code for FREE!
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 ответов
+ 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