Below is an example of a four column grid I created in my test site. It is across 600 pixels, which is the width of my body text.

This is the code that built it, apart from changing the image and text in the different columns, this is all you will need to create the example above. which I will explain as we go along.

<div class="column"><img src="http://wreckingsite.siterubix.com/wp-content/uploads/2016/02/wa_like_to_earn-300x300.jpg" alt="wa_like_to_earn" width="120" height="120" class="alignnone size-medium wp-image-73" />
<h3 style="font-size: 12pt; text align: left; text-transform: uppercase; color: #352ece; font-weight: 600; margin-top: -45px;">price</h3>

<h3 style="font-size: 12pt; text align: left; text-transform: uppercase; color: #352ece; font-weight: 600; margin-top: -45px;" rel="font-size: 12pt; text align: left; text-transform: uppercase; color: #352ece; font-weight: 600; margin-top: -45px;" rel="font-size: 12pt; text align: left; text-transform: uppercase; color: #352ece; font-weight: 600; margin-top: -45px;">price</h3>

<h2 style="font-size: 14pt; text align: left; text-transform: uppercase; color: #e60000; font-weight: 600; margin-top: -15px;">$00.00</h2>
<p style="width: 120px; margin-top: -10px;">Pulvinar luctus ullamcorper. Porttitor scelerisque commodo tincidunt ultricies donec posuere id eleifend.</p>
</div>

If you want to use the above code, you can copy and paste it as is then adapt it to your own requirements, but I would recommend you start "from scratch" and build your own code by copying and pasting each step, changing the data between the tags as you go.

Preview each step as you go along to make sure you are on the right track, this will give you a better understanding of how to build columns.



Join the Discussion
Write something…
Recent messages
RaeAnnePond Premium
Hi Harry,
I just looked at this training and it looks way over my head as you predicted, but that may be because I have not looked at the "creating a HTML grid" training yet. So I'll look at that and then come back to this. Thanks!
~ Rae Anne
Reply
Harrysastar2 Premium
Hi RaeAnne, the first step in "Creating Columns Using HTML" is very much the same as "Creating A HTML Grid" , but with further training on adding text in the columns. But if you think that may help you, certainly do it.
If you need any further help, please don't hesitate to contact me.
Reply
RaeAnnePond Premium
Thanks Harry! Have a great day!
Reply
AlexEvans Premium Plus
Thank you Harry, great tutorial just got a test site going so will have a crack.
Reply
Harrysastar2 Premium
Thanks Alexander, if you need any help give me a shout.
Reply
AlexEvans Premium Plus
Thank you Harry much appreciated, will let you know how I get on
Alexander
Reply
Tirolith Premium
Thanks for the lesson. I have done this before but have forgotten it. I need a refresher course .Tom.
Reply
Harrysastar2 Premium
Hi Tom, you're more than welcome.
Reply
Jozeph Premium
Thanks Harry, much appreciated
Bookmarked :)
J*
Reply
Harrysastar2 Premium
Thanks Joseph, how's it going? If you need any help, you know where to find me.
Reply
mijareze Premium
Thank you friend!
Ed
Reply
Harrysastar2 Premium
Any time Ed, and thanks for the reply.
Reply
Top