Best IT Recipes

Easy layout of two html columns without using tables

I am looking for a super simple method to create a two-column format for displaying some data on a web page. How can I achieve the same format as:

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

I am also open to HTML5 / CSS3.

+55
html css html5
Jun 17 '11 at 11:48
source share
11 answers
 <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 the sum of the column widths is equal to the width of the wrapper. Alternatively, you can also use percentage values ​​for the width.

For more information on basic CSS layout techniques, see this tutorial.

+87
Jun 17 '11 at 11:50
source share

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 floating hacks.

 <html> <head> <style> #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; } </style> </head> <body> <div id="content-wrapper"> <div id="content"> <div id="nav"> Left hand content </div> <div id="body"> Right hand content </div> </div> </div> </body> </html>
+40
Feb 06 '13 at 23:25
source share

I know that this question has already been answered, but, having examined the layout, I wanted to add an alternative answer that solves several traditional problems with floating elements ...

Here you can see an updated example.

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

It does not matter whether you use HTML 4.01 or HTML5 semantic elements (you need to declare the left and right containers as display: block, if they have not already been).

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 pretty neat (albeit newer) CSS add-on that allows you to place content in columns without talking to the div:

 column-count: 2;
+35
Jun 17 '11 at 12:52
source share

Well, if you want the easiest way, just put

 <div class="left">left</div> <div class="right">right</div> .left { float: left; }

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

+7
Jun 17 '11 at 11:57
source share

All previous answers contain only a hard-coded location where the first column ends and the second column begins. I would expect that this is not required or even necessary.

Recent versions of CSS are aware of the columns attribute, which simplifies column-based layouts. For older browsers, you need to enable -moz-columns and -webkit-columns .

Here's a very simple example that creates up to three columns if each of them has a width of at least 200 pixels, otherwise fewer 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>
+6
Dec 13 '14 at 3:55
source share

There is now a much simpler solution than when this question was originally asked, five years ago. CSS Flexbox allows you to initially request the location of two columns. This is the bare 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 Flexbox is that it allows you to easily determine how children should shrink and grow in order to adapt to the size of the container. In the above example, I will expand to make the field the full width of the page, make the left column at least 75 pixels wide and grow the right column to capture the remaining space. I will also pull the style into my own block, assign some background colors so that the columns are obvious, 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 therefore, if you are stuck with support for IE 8 and IE 9, you cannot use it. However, at the time of this writing, http://caniuse.com/#feat=flexbox indicates at least partial support for browsers using 94.04% of the market.

+6
May 16 '16 at 2:23
source share

If you want to do it in the HTML5 way (this particular code works better for things like blogs where <article> used several times, once for each teaser on the blog, ultimately the elements themselves don't really matter, it's stylization and placement of elements that will give you the 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>
+3
Jun 17 '11 at 12:03
source share

I know this is an old post, but I thought that I would add my two pennies. What about a rarely used and forgotten description? With a simple css snippet, you can get 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

+2
Apr 14 '16 at 13:59 on
source share

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

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; }
+1
Apr 05
source share
 <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 colors, etc., but that should do it. You must also ensure that the width of ContentLeft and ContentRight does not exceed the width of the content (including the margins).

0
Jun 17 '11 at 12:18
source share

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>
0
Sep 22 '17 at 11:57
source share


More articles:


All Articles