62

I'm looking for a super easy method to create a two column format to display some data on a webpage. How can i achieve the same format as:

<table>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
    </tr>
</table>

I'm open to HTML5 / CSS3 techniques as well.

Fixer
  • 5,985
  • 8
  • 40
  • 58

12 Answers12

94
<style type="text/css">
#wrap {
   width:600px;
   margin:0 auto;
}
#left_col {
   float:left;
   width:300px;
}
#right_col {
   float:right;
   width:300px;
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>

Make sure that the sum of the colum-widths equals the wrap width. Alternatively you can use percentage values for the width as well.

For more info on basic layout techniques using CSS have a look at this tutorial

Dennis Traub
  • 50,557
  • 7
  • 93
  • 108
  • 7
    Actually, you don't really need to float anything to the right, both divs can have the float to the left and the effect is the same as what was request by the OP. – jackJoe Jun 17 '11 at 12:00
  • 12
    You are using fixed width columns with CSS. The table version has dynamic width columns. Sometimes a liquid layout is desired. What then? – Ryan Mar 27 '13 at 19:24
  • 3
    floating has lots of weird side effects, for example the parent container won't expand in height to fit the size of these columns, and you lose the box sizing. – Mouscellaneous Jul 07 '14 at 09:32
  • 1
    Why use IDs when styling? Am I missing something? – Makan Jun 09 '17 at 07:56
42

Well, you can do css tables instead of html tables. This keeps your html semantically correct, but allows you to use tables for layout purposes.

This seems to make more sense than using float hacks.

    #content-wrapper{
      display:table;
    }
    
    #content{
      display:table-row;
    }
    
    #content>div{
      display:table-cell
    }
    
    /*adding some extras for demo purposes*/
    #content-wrapper{
      width:100%;
      height:100%;
      top:0px;
      left:0px;
      position:absolute;
    }
    #nav{
      width:100px;
      background:yellow;
    }
    #body{
      background:blue;
    }
<div id="content-wrapper">
  <div id="content">
    <div id="nav">
      Left hand content
    </div>
    <div id="body">
      Right hand content
    </div>
  </div>
</div>
RobKohr
  • 6,611
  • 7
  • 48
  • 69
  • 4
    I don't know why this is at the bottom. – pizza247 Feb 11 '13 at 23:24
  • As far as I can tell this is the only way to get a two column layout without tables that can have both dynamic width columns and equal height cells. So if you want a liquid layout this is probably the way to go. – Ryan Mar 27 '13 at 19:28
  • Do you think there is a way to "unite" `content` and `content-wrapper` into one html element? – dialer Apr 28 '13 at 09:17
  • Nevermind; apparently you can completely leave out the `display:table-row` and still get the desired effects. – dialer Apr 28 '13 at 09:45
  • Use min-width with #nav if you don't want the #nav bar to be squished when assigning a width greater than container width to #body... Useful when you want to dynamically extend #body to fill page. Use #body width 100% – payling Sep 05 '13 at 16:46
  • One suggestion, I had to use "word-break:break-all;" just under "display:table-cell" in order to prevent text from resizing the cell. Otherwise this is an excellent solution! – Joel Tipke Apr 20 '14 at 16:54
35

I know this question has already been answered, but having dealt with layout a fair bit, I wanted to add an alternative answer that solves a few traditional problems with floating elements...

You can see the updated example in action here.

http://jsfiddle.net/Sohnee/EMaDB/1/

It makes no difference whether you are using HTML 4.01 or HTML5 with semantic elements (you will need to declare the left and right containers as display:block if they aren't already).

CSS

.left {
    background-color: Red;
    float: left;
    width: 50%;
}

.right {
    background-color: Aqua;
    margin-left: 50%;
}

HTML

<div class="left">
    <p>I have updated this example to show a great way of getting a two column layout.</p>
</div>
<div class="right">
    <ul>
        <li>The columns are in the right order semantically</li>
        <li>You don't have to float both columns</li>
        <li>You don't get any odd wrapping behaviour</li>
        <li>The columns are fluid to the available page...</li>
        <li>They don't have to be fluid to the available page - but any container!</li>
    </ul>
</div>

There is also a rather neat (albeit newer) addition to CSS that allows you to layout content into columns without all this playing around with divs:

column-count: 2;
Fenton
  • 241,084
  • 71
  • 387
  • 401
16

There's now a much simpler solution than when this question was originally asked, five years ago. A CSS Flexbox makes the two column layout originally asked for easy. This is the bare bones equivalent of the table in the original question:

<div style="display: flex">
    <div>AAA</div>
    <div>BBB</div>
</div>

One of the nice things about a Flexbox is that it lets you easily specify how child elements should shrink and grow to adjust to the container size. I will expand on the above example to make the box the full width of the page, make the left column a minimum of 75px wide, and grow the right column to capture the leftover space. I will also pull the style into its own proper block, assign some background colors so that the columns are apparent, and add legacy Flex support for some older browsers.

<style type="text/css">
.flexbox {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

.left {
    background: #a0ffa0;
    min-width: 75px;
    flex-grow: 0;
}

.right {
    background: #a0a0ff;
    flex-grow: 1;
}
</style>

...

<div class="flexbox">
    <div class="left">AAA</div>
    <div class="right">BBB</div>
</div>

Flex is relatively new, and so if you're stuck having to support IE 8 and IE 9 you can't use it. However, as of this writing, http://caniuse.com/#feat=flexbox indicates at least partial support by browsers used by 94.04% of the market.

twm
  • 1,448
  • 11
  • 19
8

Well, if you want the super easiest method, just put 

<div class="left">left</div>
<div class="right">right</div>

.left {
    float: left;    
}

though you may need more than that depending on what other layout requirements you have.

fearofawhackplanet
  • 52,166
  • 53
  • 160
  • 253
  • This is the best solution compared to all the rest for the following reasons. 1. Doesnt need html tables, 2. CSS tables requires atleast IE8. The only disadvantage is, if you want a border around the div.right and you have some contents in div.right that it exceeds one line, then div.right will overflow into the float. One way to get around that is to use overflow:auto or overflow:hidden. – Lordbalmon May 30 '15 at 17:42
7

All the previous answers only provide a hard-coded location of where the first column ends and the second column starts. I would have expected that this is not required or even not wanted.

Recent CSS versions know about an attribute called columns which makes column based layouts super easy. For older browsers you need to include -moz-columns and -webkit-columns, too.

Here's a very simple example which creates up to three columns if each of them has at least 200 pixes width, otherwise less columns are used:

<html>
  <head>
    <title>CSS based columns</title>
  </head>
  <body>
    <h1>CSS based columns</h1>
    <ul style="columns: 3 200px; -moz-columns: 3 200px; -webkit-columns: 3 200px;">
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three</li>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six</li>
      <li>Item eight</li>
      <li>Item nine</li>
      <li>Item ten</li>
      <li>Item eleven</li>
      <li>Item twelve</li>
      <li>Item thirteen</li>
    </ul>
  </body>
</html>
Axel Beckert
  • 6,814
  • 1
  • 22
  • 23
3

I know this is an old post, but figured I'd add my two penneth. How about the seldom used and oft' forgot Description list? With a simple bit of css you can get a really clean markup.

<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>

take a look at this example http://codepen.io/butlerps/pen/wGmXPL

philip
  • 403
  • 1
  • 4
  • 14
3

If you want to do it the HTML5 way (this particular code works better for things like blogs, where <article> is used multiple times, once for each blog entry teaser; ultimately, the elements themselves don't matter much, it's the styling and element placement that will get you your desired results):

<style type="text/css">
article {
  float: left;
  width: 500px;
}

aside {
  float: right;
  width: 200px;
}

#wrap {
  width: 700px;
  margin: 0 auto;
}
</style>

<div id="wrap">
  <article>
     Main content here
  </article>
  <aside>
     Sidebar stuff here
  </aside>
</div>
Shauna
  • 9,495
  • 2
  • 37
  • 54
2

You can create text columns with CSS Multiple Columns property. You don't need any table or multiple divs.

HTML

<div class="column">
       <!-- paragraph text comes here -->
</div>

CSS

.column {
    column-count: 2;
    column-gap: 40px;
}

Read more about CSS Multiple Columns at https://www.w3schools.com/css/css3_multiple_columns.asp

TThomas
  • 41
  • 4
1

This code not only allows you to add two columns, it allows you to add as many coloumns as you want and align them left or right, change colors, add links etc. Check out the Fiddle link also

Fiddle Link : http://jsfiddle.net/eguFN/

<div class="menu">
                <ul class="menuUl">
                    <li class="menuli"><a href="#">Cadastro</a></li>
                    <li class="menuli"><a href="#">Funcionamento</a></li>
                    <li class="menuli"><a href="#">Regulamento</a></li>
                    <li class="menuli"><a href="#">Contato</a></li>
                </ul>
</div>

Css is as follows

.menu {
font-family:arial;
color:#000000;
font-size:12px;
text-align: left;
margin-top:35px;
}

.menu a{
color:#000000
}

.menuUl {
  list-style: none outside none;
  height: 34px;
}

.menuUl > li {
  display:inline-block;
  line-height: 33px;
  margin-right: 45px;

}
harishannam
  • 2,747
  • 3
  • 30
  • 39
0

a few small changes to make it responsive

<style type="text/css">
#wrap {
    width: 100%;
    margin: 0 auto;
    display: table;
}
#left_col {
   float:left;
   width:50%;
}
#right_col {
   float:right;
   width:50%;
}
@media only screen and (max-width: 480px){
    #left_col {
       width:100%;
    }
    #right_col {
       width:100%;
    }
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>
Altravista
  • 357
  • 3
  • 12
  • Here's a great way to do multiple columns: https://stackoverflow.com/questions/9966890/best-way-to-do-columns-in-html-css/49499670#49499670 – user2288580 Mar 26 '18 at 20:04
0
<div id"content">
<div id"contentLeft"></div>
<div id"contentRight"></div>
</div> 

#content {
clear: both;
width: 950px;
padding-bottom: 10px;
background:#fff;
overflow:hidden;
}
#contentLeft {
float: left;
display:inline;
width: 630px;
margin: 10px;
background:#fff;
}
#contentRight {
float: right;
width: 270px;
margin-top:25px;
margin-right:15px;
background:#d7e5f7;
}

Obviously you will need to adjust the size of the columns to suit your site as well as colours etc but that should do it. You also need to make sure that your ContentLeft and ContentRight widths do not exceed the Contents width (including margins).

Magnum26
  • 265
  • 2
  • 13