Best Way to do Columns in HTML CSS

Question

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   lt column gt   lt  -- content -- gt   lt  column gt    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

User · Answer

You might also try     x000D   x000D   col  x000D    float  left  x000D    x000D   col    col  x000D    float  left  x000D    margin-left  20px  x000D    x000D   x000D     or    x000D   x000D   col not  nth-child 1    x000D    float left  x000D    margin-left  20px  x000D    x000D   x000D    x000D   lt div class  row  gt  x000D     lt div class  col  gt column lt  div gt  x000D     lt div class  col  gt column lt  div gt  x000D     lt div class  col  gt column lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    ref  http   codepen io co0kie pen gPKNWX editors 1100

User · Answer

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    lt style gt   3col       -webkit-column-count  3      -webkit-column-gap  10px      -moz-column-count  3      -moz-column-gap  10px      column-count 3      column-gap 10px     lt  style gt   lt div class  3col  gt   lt p gt col1 lt  p gt   lt p gt col2 lt  p gt   lt p gt col3 lt  p gt   lt  div gt

User · Answer

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        lt div id  contentBox  class  clearfix  gt        lt  div gt    CSS    clearfix   zoom  1     clearfix before   clearfix after   content    0020   display  block  height  0  overflow  hidden     clearfix after   clear  both

User · Answer

If you want to do multiple  3   columns here is a great snippet that works perfectly and validates as valid HTML5    lt  DOCTYPE html gt   lt html gt       lt head gt           lt meta charset  utf-8  gt           lt title gt Multiple Colums lt  title gt            lt  -- Styles -- gt           lt style gt               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                         lt  style gt        lt  head gt       lt body gt           lt section class  flex-center  gt               lt h4 gt Tableless Columns Example lt  h4 gt  lt br   gt               lt div class  spaceOut  gt                  Column 1 lt br   gt               lt  div gt               lt div class  spaceOut  gt                  Column 2 lt br   gt               lt  div gt               lt div class  spaceOut  gt                  Column 3 lt br   gt               lt  div gt                     lt div class  spaceOut  gt                  Column 4 lt br   gt               lt  div gt               lt div class  spaceOut  gt                  Column 5 lt br   gt               lt  div gt           lt  section gt       lt  body gt   lt  html gt

User · Answer

I would suggest you to either use  lt table gt  or CSS   CSS is preferred for being more flexible  An example would be    lt  -- of course  you should move the inline CSS style to your stylesheet -- gt   lt  -- main container  width   70  of page  centered -- gt   lt div id  contentBox  style  margin 0px auto  width 70   gt     lt  -- columns divs  float left  no margin so there is no space between column  width 1 3 -- gt       lt div id  column1  style  float left  margin 0  width 33    gt       CONTENT      lt  div gt        lt div id  column2  style  float left  margin 0 width 33    gt       CONTENT      lt  div gt        lt div id  column3  style  float left  margin 0 width 33   gt       CONTENT      lt  div gt   lt  div gt    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

User · Answer

Bootstrap  Check out their awesome grid system here   Using Bootstrap  you could make three columns like this    lt div class  container  gt     lt div class  row  gt       lt div class  col-md-4  gt  col-md-4 lt  div gt       lt div class  col-md-4  gt  col-md-4 lt  div gt       lt div class  col-md-4  gt  col-md-4 lt  div gt     lt  div gt   lt  div gt

User · Answer

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    https   css-tricks com snippets css complete-guide-grid  https   css-tricks com snippets css a-guide-to-flexbox   Grid    container     display  grid   inline-grid      Flex    container     display  flex   inline-flex

[html] Best Way to do Columns in HTML/CSS

Examples related to html

Examples related to css