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!

19 comments:

  1. This worked really well. Thanks!

    ReplyDelete
  2. Awesome! thanks!!

    ReplyDelete
  3. How do i get clickable columns in my blog such that there will be things in that column page ? I want to have a blogshop with several pages.. Thank you so much !!!

    ReplyDelete
    Replies
    1. I guess I don't understand your question? If you want to make something that you can click within the column, attach a link to it? Does that help?

      Delete
  4. It doesn't say where to put the code.

    ReplyDelete
    Replies
    1. You can direct paste the whole code to blogger post or insert the style code to blogger skin

      regards
      JelBee

      Delete
  5. I love it! I'm using it now on http://www.comingtogrips.net/p/shop.html

    I can't figure out how to center my images? I've tried every code I can find online. Also, is there anyway to add a center line without a border? Thanks so much. I love your site. It's awesome and super helpful!!!

    Polly

    ReplyDelete
    Replies
    1. your sample demo page doesn't exist. Maybe u deleted it.

      regards,
      JelBee

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This worked perfectly, only thing is I want to add a third column so that there is one on the left, one in the center, and one on the right; could you help!?

    Thanks!

    ReplyDelete
    Replies
    1. Just increase the width of the #columns and add the column left or right.

      regards
      JelBee

      Delete
  8. I've been using the code perfectly up until this last post, every other post its been at the end so I've never noticed this quirk.

    Have you had any issues with adding text after your columns? the script works really well as long as you do not want to add any thing after them.

    ReplyDelete
  9. Thanks for this. It was very helpful.

    ReplyDelete
  10. I also benefited from your concise explanation.

    ReplyDelete
  11. How woould I make this 3 columns? I am terrible with coding.

    ReplyDelete
  12. How woould I make this 3 columns? I am terrible with coding.

    ReplyDelete
  13. THANK YOU SOOOOOOOO MUCH!!!!!!!!

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...