44

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?

muttley91
  • 12,278
  • 33
  • 106
  • 160
  • Use float in your stylesheet? – hjpotter92 Apr 01 '12 at 18:13
  • 2
    Hate to say it but sometimes just using the old school table element is the easiest way to format content in rows and columns. I know you are looking for a css route so decided to add comment rather than answer. – Dan P Apr 01 '12 at 18:14
  • @TheJumpingFrog I've used float but I find inconsistent behaviour with this depending on screen size. Is there a way to say "always display in this one format" using the float method? – muttley91 Apr 01 '12 at 18:16
  • @DanP I'm currently trying tables also, but I'm having issues getting them centered (for whatever reason, the bootstrap CSS might be messing it up) so I figured I'd look elsewhere before fighting with a table further. – muttley91 Apr 01 '12 at 18:16
  • @rar: to center the tables, you can use this in CSS: table { margin: auto; width: 100%; } – hjpotter92 Apr 01 '12 at 18:17
  • Also, for the float, you should set their widths to 33% (if 3 columns) – hjpotter92 Apr 01 '12 at 18:18
  • They should also be centered. Would `.column { float:left; margin:auto; width:33% }` work for that? – muttley91 Apr 01 '12 at 18:19
  • Twitter bootstrap is not working for you? (http://twitter.github.com/bootstrap/base-css.html#tables). It should add media queries to keep your table looking good even if you change your browser's window. – r_31415 Apr 01 '12 at 18:28
  • That's for data tables though. I was trying to use the table for layout. – muttley91 Apr 01 '12 at 18:32
  • Here is a good explanation for two columns http://codenuggets.com/2014/05/22/css-two-column-layout/ – Jeff May 22 '14 at 17:35

7 Answers7

41

I would suggest you to either use <table> or CSS.

CSS is preferred for being more flexible. An example would be:

<!-- of course, you should move the inline CSS style to your stylesheet -->
<!-- main container, width = 70% of page, centered -->
<div id="contentBox" style="margin:0px auto; width:70%">

 <!-- columns divs, float left, no margin so there is no space between column, width=1/3 -->
    <div id="column1" style="float:left; margin:0; width:33%;">
     CONTENT
    </div>

    <div id="column2" style="float:left; margin:0;width:33%;">
     CONTENT
    </div>

    <div id="column3" style="float:left; margin:0;width:33%">
     CONTENT
    </div>
</div>

jsFiddle: http://jsfiddle.net/ndhqM/

Using float:left would make 3 columns stick to each other, coming in from left inside the centered div "content box".

caiosm1005
  • 1,686
  • 1
  • 19
  • 31
AbSoLution8
  • 1,203
  • 1
  • 18
  • 27
  • I think you want that `width` inside the style attribute: `style="margin:0 auto; width: 70%;"`. Also, I'm not aware of any browsers that apply margin to `div` in their default style sheet, so `margin: 0;` on the floated divs would seem superfluous. – steveax Apr 01 '12 at 18:40
  • 2
    I want to add that I found Mikey's answer was required for my personal formatting issues. Future readers, see Mikey's answer as well as this one. – muttley91 Apr 01 '12 at 19:08
  • 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 https://css-tricks.com/snippets/css/complete-guide-grid/ and https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – John Oct 25 '19 at 23:39
25

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>
EightyOne Unite
  • 11,665
  • 14
  • 79
  • 105
  • 2
    You may find it useful to know the browser support on this on [w3schools](http://www.w3schools.com/css3/css3_multiple_columns.asp); IE10+. I have to wait for better browser support – Duncanmoo Jul 29 '13 at 07:19
  • 1
    @Duncanmoo's link is broken, try this one: http://caniuse.com/multicolumn - currently only about 14% of browser support by usage (76% with prefixes). – naught101 Oct 23 '14 at 08:57
  • Wish I could edit an old comment, well here is the browser support on this on [w3schools](http://www.w3schools.com/css/css3_multiple_columns.asp) link. – Duncanmoo Oct 23 '14 at 10:54
  • Cool stuff! Exactly what I needed! – Worker Nov 12 '14 at 11:06
  • 1
    It's quite broadly supported now (≈83%). Take a look at [caniuse](http://caniuse.com/multicolumn/embed/) for browser support. – Buzut Nov 20 '14 at 17:08
  • 1
    [97.8% browser support](https://caniuse.com/#search=columns) now. Check more about columns option in CSS [here](https://kolosek.com/css-columns/) – Nesha Zoric Feb 22 '18 at 13:05
9

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; }
InanisAtheos
  • 603
  • 1
  • 7
  • 18
Frank van Wijk
  • 3,234
  • 20
  • 41
  • You're welcome. Keep in mind that this is the common way to fix layout problems with floated elements (like `ul` menus) – Frank van Wijk Apr 01 '12 at 19:42
  • I'll definitely make note of that, since it's not the first time I've run into issues with this. Thanks! – muttley91 Apr 19 '12 at 15:59
  • 4
    Using clearfix is very common, however if you have a wrapper around the three columns, you can set that wrapper (#contentBox in this case) to overflow:auto;. This will make the #contentBox expand to accomodate the three columns, regardless of their height, thus pushing the below content, down. It's a much cleaner solution and requires less classes in the HTML. – InanisAtheos Jan 30 '13 at 09:33
  • 1
    @PatrikAlienus Thats a great tip. However, using overflow: auto will put scroll bar on the #contentBox div. You could use overflow hidden instead or set height to the child nodes. – Srikanth Kondaparthy May 08 '14 at 00:48
  • 1
    @SrikanthKondaparthy True there are some instances where scrollbars may appear - in some browsers. However there are usually ways around it. 'overflow:hidden' would however hide the floated divs, so I don't really see how that would solve it?.. Setting the height is always an option - if you know the height. With dynamic content that's not a solution either. – InanisAtheos May 12 '14 at 08:32
4

You might also try. 

.col{
  float: left;
}
.col + .col{
  float: left;
  margin-left: 20px;
}

/* or */

.col:not(:nth-child(1)){
  float:left;
  margin-left: 20px;
}

 
<div class="row">
  <div class="col">column</div>
  <div class="col">column</div>
  <div class="col">column</div>
</div>

ref: http://codepen.io/co0kie/pen/gPKNWX?editors=1100

co0kie
  • 59
  • 3
2

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>
bhekman
  • 3,227
  • 21
  • 24
1

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>
user2288580
  • 2,210
  • 23
  • 16
  • Getting rid of `align-items: center;` stops the column headers from being pushed down. – Vass Mar 24 '21 at 15:15
1

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;
}
John
  • 976
  • 1
  • 15
  • 21