How to Make Columns in HTML (for blogger)

Pin It

One day I wanted to make some columns.  I had to look up many different resources on how to best do the columns in the way that I wanted.

This was finally the best style that I could come up with for columns.  I hope it is useful for you!

.
.



The code to make it look like that is listed here:

 <style>

    #columns {
        width: 600px;
    }

    #columns .column {
        position: relative;
        width: 46%;
        padding: 1%;
        border: solid 1px #000;
    }

    #columns .left {
        float: left;
    }

    #columns .right {
        float: right;
    }

</style>

<div id="columns">
    <div class="left column">
        <p>One day I wanted to make some columns.  

         I had to look up many different resources on how 

         to best do the columns in the way that I wanted.</p>
    </div>
    <div class="right column">
        <p>This was finally the best style that I could come 

        up with for columns.  I hope it is useful for you!</p>
    </div>
</div>

Now you can see that I've changed the width of the column, and you can change that to the width of any space that you want to put the columns into.

The % width indicates what percent they'll make up of that pixel amount, so adjust this to make your columns smaller or larger. 

You can also increase the border around the columns by changing the border px to be more and make it thicker.  You can also change it to read "none" (without the quotation marks) and there won't be a border.

You can add more lines to each column by using the <p></p> function.

Try it out!  Put it in a dummy post and test out what happens if you change the values around!

Have fun testing your own columns!