45

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?

10
  • Use float in your stylesheet?
    – hjpotter92
    Apr 1, 2012 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 1, 2012 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 1, 2012 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 1, 2012 at 18:16
  • @rar: to center the tables, you can use this in CSS: table { margin: auto; width: 100%; }
    – hjpotter92
    Apr 1, 2012 at 18:17

7 Answers 7

42

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".

3
  • 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 1, 2012 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 1, 2012 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 css-tricks.com/snippets/css/complete-guide-grid and css-tricks.com/snippets/css/a-guide-to-flexbox
    – John
    Oct 25, 2019 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>
6
  • 2
    You may find it useful to know the browser support on this on w3schools; IE10+. I have to wait for better browser support
    – Duncanmoo
    Jul 29, 2013 at 7:19
  • 1
    @Duncanmoo's link is broken, try this one: caniuse.com/multicolumn - currently only about 14% of browser support by usage (76% with prefixes).
    – naught101
    Oct 23, 2014 at 8:57
  • Wish I could edit an old comment, well here is the browser support on this on w3schools link.
    – Duncanmoo
    Oct 23, 2014 at 10:54
  • 1
    It's quite broadly supported now (≈83%). Take a look at caniuse for browser support.
    – Buzut
    Nov 20, 2014 at 17:08
  • 1
    97.8% browser support now. Check more about columns option in CSS here Feb 22, 2018 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; }
5
  • You're welcome. Keep in mind that this is the common way to fix layout problems with floated elements (like ul menus) Apr 1, 2012 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, 2012 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. Jan 30, 2013 at 9: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. May 8, 2014 at 0: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. May 12, 2014 at 8: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

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>
0
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>
1
  • Getting rid of align-items: center; stops the column headers from being pushed down.
    – Vass
    Mar 24, 2021 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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.