Best Way to do Columns in HTML/CSS

by

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

More Related Contents:

  1. Bad: [html] in html code i can’t make two form input in one row [closed]
  2. How to overlay one div over another div
  3. Font Awesome 5 on pseudo elements shows square instead of icon
  4. Center image horizontally within a div
  5. How to change the height of a ?
  6. css ellipsis on second line
  7. How can you customize the numbers in an ordered list?
  8. Is it bad to use !important in a CSS property?
  9. How to make a whole ‘div’ clickable in html and css without JavaScript? [duplicate]
  10. Can a span be closed using ?
  11. Stop CSS transition from firing on page load
  12. How to specify the order of CSS classes?
  13. Using :after to clear floating elements
  14. Bootstrap 3 – How to maximize input width inside navbar
  15. 404 page not found – Go rendering css file
  16. How can I resize an image to a percentage of itself with CSS?
  17. HTML/CSS: Make a div “invisible” to clicks?
  18. css single or multiple line vertical align
  19. Jenkins Content Security Policy
  20. How do I vertical center text next to an image in html/css?
  21. Image in SELECT element [duplicate]
  22. Responsive CSS Circles
  23. Inserting HTML tag in the middle of Arabic word breaks word connection (cursive)
  24. Can Outlook 2010 use a web font in an html email?
  25. CSS Vertically & Horizontally Center Div [duplicate]
  26. Setting max-height for table cell contents
  27. Wrap table row to the next line
  28. @media queries and image swapping [closed]
  29. How can I create equal width/height boxes that fit the screen width? [duplicate]
  30. Sticky header and footer scrollable content

Leave a Comment