Best Way to Do Columns in HTML/CSS

Best Way to do Columns in HTML/CSS

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

How to create 3 columns in HTML

you could always use bootstrap as already said.
if you rather do it with pure css and html see http://jsfiddle.net/a6yecjqb/4/

.split {
  height: 100%;
  width: 33.33%;
  position: fixed;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.center {
  left:33%;
  right:33%;
  background: #0F2027; 
  background: linear-gradient(to bottom, #0F2027, #080e10);
}

if you change the width of split and add a center block you will get 3 div's in separate rows. if more explanation is needed let me know

Putting text into 3 posts/columns with HTML/CSS

For the three text sections, you need three child divisions in one parent division.

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

Style it this way:

.parent{
  display: block;
  width: 100%;
  margin: 0px auto;
  text-align: center;
}
.child{
  display: inline-block;
  width: 30%;
  height: auto;
  margin: 0px auto;
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
}

@media only screen and (max-width: 768px) {
  .child{
    width: 100%;
  }
}

The media query is there to make the divisions stack on one another on mobile screens.

How to create a 3 column layout in css?

If you want to have 3 differnet areas on the screen, the effective method for doing that would be:

<style> .third { width: 33.33%; float: left; } </style>

<div class="third"> Something </div>
<div class="third"> Something </div>
<div class="third"> Something </div>

The class="third" is adding the css that is inside of the {}'s that I have made. - Meaning that each of the div's are given the width: 33.33% (1/3 of the screen) and a float: left which will just move the areas to be able to move out of the normal CSS and HTML scope of stacking on top of each other.

Hope this helps! :)

3 column layout HTML/CSS

Something like this should do it:

.column-left{ float: left; width: 33.333%; }
.column-right{ float: right; width: 33.333%; }
.column-center{ display: inline-block; width: 33.333%; }

DEMO

EDIT

To do this with a larger number of columns you could build a very simple grid system. For example, something like this should work for a five column layout:

.column {    float: left;    position: relative;    width: 20%;      /*for demo purposes only */    background: #f2f2f2;    border: 1px solid #e6e6e6;    box-sizing: border-box;}
.column-offset-1 {    left: 20%;}.column-offset-2 {    left: 40%;}.column-offset-3 {    left: 60%;}.column-offset-4 {    left: 80%;}
.column-inset-1 {    left: -20%;}.column-inset-2 {    left: -40%;}.column-inset-3 {    left: -60%;}.column-inset-4 {    left: -80%;}

<div class="container">   <div class="column column-one column-offset-2">Column one</div>   <div class="column column-two column-inset-1">Column two</div>   <div class="column column-three column-offset-1">Column three</div>   <div class="column column-four column-inset-2">Column four</div>   <div class="column column-five">Column five</div></div>

---

Related Topics