Simple two column html layout without using tables

Question

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    lt table gt       lt tr gt           lt td gt AAA lt  td gt           lt td gt BBB lt  td gt       lt  tr gt   lt  table gt    I m open to HTML5   CSS3 techniques as well

User · Answer

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;

}

User · Answer

Well  if you want the super easiest method  just put    lt div class  left  gt left lt  div gt   lt div class  right  gt right lt  div gt    left       float  left          though you may need more than that depending on what other layout requirements you have

User · Answer

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    lt html gt     lt head gt       lt title gt CSS based columns lt  title gt     lt  head gt     lt body gt       lt h1 gt CSS based columns lt  h1 gt       lt ul style  columns  3 200px  -moz-columns  3 200px  -webkit-columns  3 200px   gt         lt li gt Item one lt  li gt         lt li gt Item two lt  li gt         lt li gt Item three lt  li gt         lt li gt Item four lt  li gt         lt li gt Item five lt  li gt         lt li gt Item six lt  li gt         lt li gt Item eight lt  li gt         lt li gt Item nine lt  li gt         lt li gt Item ten lt  li gt         lt li gt Item eleven lt  li gt         lt li gt Item twelve lt  li gt         lt li gt Item thirteen lt  li gt       lt  ul gt     lt  body gt   lt  html gt

User · Answer

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     lt html gt     lt head gt       lt style gt    content-wrapper    display table      content    display table-row      content gt 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     lt  style gt      lt  head gt     lt body gt       lt div id  content-wrapper  gt         lt div id  content  gt           lt div id  nav  gt            Left hand content          lt  div gt           lt div id  body  gt            Right hand content          lt  div gt         lt  div gt       lt  div gt     lt  body gt   lt  html gt

User · Answer

a few small changes to make it responsive   lt style type  text css  gt   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            lt  style gt    lt div id  wrap  gt       lt div id  left col  gt                   lt  div gt       lt div id  right col  gt                   lt  div gt   lt  div gt

User · Answer

If you want to do it the HTML5 way  this particular code works better for things like blogs  where  lt article gt  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     lt style type  text css  gt  article     float  left    width  500px     aside     float  right    width  200px      wrap     width  700px    margin  0 auto     lt  style gt    lt div id  wrap  gt     lt article gt       Main content here    lt  article gt     lt aside gt       Sidebar stuff here    lt  aside gt   lt  div gt

User · Answer

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    lt dl gt   lt dt gt  lt  dt gt  lt dd gt  lt  dd gt   lt dt gt  lt  dt gt  lt dd gt  lt  dd gt   lt dt gt  lt  dt gt  lt dd gt  lt  dd gt   lt  dl gt    take a look at this example http   codepen io butlerps pen wGmXPL

User · Answer

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    lt div style  display  flex  gt       lt div gt AAA lt  div gt       lt div gt BBB lt  div gt   lt  div gt    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    lt style type  text css  gt   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     lt  style gt         lt div class  flexbox  gt       lt div class  left  gt AAA lt  div gt       lt div class  right  gt BBB lt  div gt   lt  div gt    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

User · Answer

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   lt div class  left  gt       lt p gt I have updated this example to show a great way of getting a two column layout  lt  p gt   lt  div gt   lt div class  right  gt       lt ul gt           lt li gt The columns are in the right order semantically lt  li gt           lt li gt You don t have to float both columns lt  li gt           lt li gt You don t get any odd wrapping behaviour lt  li gt           lt li gt The columns are fluid to the available page    lt  li gt           lt li gt They don t have to be fluid to the available page - but any container  lt  li gt       lt  ul gt   lt  div gt    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

User · Answer

You can create text columns with CSS Multiple Columns property  You don t need any table or multiple divs   HTML   lt div class  column  gt          lt  -- paragraph text comes here -- gt   lt  div gt     CSS   column       column-count  2      column-gap  40px      Read more about CSS Multiple Columns  at https   www w3schools com css css3 multiple columns asp

User · Answer

lt style type  text css  gt   wrap      width 600px     margin 0 auto     left col      float left     width 300px     right col      float right     width 300px     lt  style gt    lt div id  wrap  gt       lt div id  left col  gt                   lt  div gt       lt div id  right col  gt                   lt  div gt   lt  div gt    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

User · Answer

lt div id content  gt   lt div id contentLeft  gt  lt  div gt   lt div id contentRight  gt  lt  div gt   lt  div gt     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

[css] Simple two column html layout without using tables

Examples related to css

Examples related to html