I'm looking for a way to display 3 columns of content. I've found a way to display wrap-around columns, but I don't want that for this page. I'm looking for a way to say
<column>
<!-- content -->
</column>
3 times, and have 3 columns displayed beside each other. The best example I have offhand is The Verge (http://www.theverge.com/). What is the best way to do this?
You might also try.
.col{_x000D_
float: left;_x000D_
}_x000D_
.col + .col{_x000D_
float: left;_x000D_
margin-left: 20px;_x000D_
}_x000D_
_x000D_
/* or */_x000D_
_x000D_
.col:not(:nth-child(1)){_x000D_
float:left;_x000D_
margin-left: 20px;_x000D_
}_x000D_
_x000D_
<div class="row">_x000D_
<div class="col">column</div>_x000D_
<div class="col">column</div>_x000D_
<div class="col">column</div>_x000D_
</div>Bootstrap. Check out their awesome grid system here.
Using Bootstrap, you could make three columns like this:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
You should probably consider using css3 for this though it does include the use of vendor prefixes.
I've knocked up a quick fiddle to demo but the crux is this.
<style>
.3col
{
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
column-count:3;
column-gap:10px;
}
</style>
<div class="3col">
<p>col1</p>
<p>col2</p>
<p>col3</p>
</div>
If you want to do multiple (3+) columns here is a great snippet that works perfectly and validates as valid HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple Colums</title>
<!-- Styles -->
<style>
.flex-center {
width: 100%;
align-items: center;/*These two properties center vetically*/
height: 100vh;/*These two properties center vetically*/
display: flex;/*This is the attribute that separates into columns*/
justify-content: center;
text-align: center;
position: relative;
}
.spaceOut {
margin-left: 25px;
margin-right: 25px;
}
</style>
</head>
<body>
<section class="flex-center">
<h4>Tableless Columns Example</h4><br />
<div class="spaceOut">
Column 1<br />
</div>
<div class="spaceOut">
Column 2<br />
</div>
<div class="spaceOut">
Column 3<br />
</div>
<div class="spaceOut">
Column 4<br />
</div>
<div class="spaceOut">
Column 5<br />
</div>
</section>
</body>
</html>
In addition to the 3 floated column structure (which I would suggest as well), you have to insert a clearfix to prevent layoutproblems with elements after the columncontainer (keep the columncontainer in the flow, so to speak...).
<div id="contentBox" class="clearfix">
....
</div>
CSS:
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
You also have CSS Grid and CSS Flex, both can give you columns that keep their position and size ratios depending on screen size, and flex can also easily rearrange the columns if screen size is too small so they can maintain a minimum width nicely.
See these guides for full details:
Grid:
.container {
display: grid | inline-grid;
}
Flex:
.container {
display: flex | inline-flex;
}
Source: Stackoverflow.com