How To Create a Two Column Layout | w3 css column
Learnhowtocreatea2-columnlayoutgridwithCSS.TryitYourself»[1]HowToCreateaTwoColumnLayoutStep1)AddHTML:Example
Learnhowtocreatea2-columnlayoutgridwithCSS.TryitYourself»[1]HowToCreateaTwoColumnLayoutStep1)AddHTML:Example
Learn how to create a 2-column layout grid with CSS.
Try it Yourself »[1]
How To Create a Two Column Layout Step 1) Add HTML: Example<div class="row"> <div class="column"></div> <div class="column"></div></div>
Step 2) Add CSS:In this example, we will create two equal columns:
Float Example .column { float: left; width: 50%;}/* Clear floats after the columns */.row:after { content: ""; display: table; clear: both;}
Try it Yourself »[2]A modern way of creating two columns, is to use CSS Flexbox[3]. However, it is not supported in Internet Explorer 10 and earlier versions.
It is up to you if you want to use floats or flex to create a two-column layout. However, if you need support for IE10 and down, you should use float.
Tip: To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter[4].
In this example, we ...