Creating columns in an HTML page - Squarespace 5

I would like to have 4 columns to list our equipment.

I have created an HTML page but can only list everything in one long list.

Can someone please kindly please share or advise as to what code I would need to add in the CSS section to achieve this.

My site:
Many thanks in advance.

asked Apr 01 '13 at 08:35 by Hiroe 111



I would write the following html for your page:

<div id="pgCols">
<div class="block first">
<ul style="list-style: none; padding: 0;">
<li>RED Scarlet (PL Mount)</li>
<li>RED EVF</li>
<div class="block">
<ul style="list-style: none; padding: 0;">
<li>Miller Pro Jib</li>
<li>Wally Dolly (20+ metres)</li>
<div class="block">
<ul style="list-style: none; padding: 0;">
<div class="block">
<ul style="list-style: none; padding: 0;">

Then I would write the following CSS:

#pgCols .block {
float: left;
width: 20%;
margin: 0 0 0 5%; 
#pgCols .first, * html #pgCols .first {
clear: both; 
margin: 0;

Let me know how you go with that. Might need to be tweaked a bit.

answered Apr 01 '13 at 21:44 by Heids 584249


Many thanks Heids.

I put in the CSS code.

But were do I input the HTML code?

Thanks Hiroe

(Apr 01 '13 at 22:13) Hiroe

All good... Just add the html on the page itself.

When in 'Content Editing' mode, click on 'Edit Page'. Then click the 'html' option in the top menu - to the right. Place your html code in place of the text already there - but make sure you finish the lists off. I didn't include all the list items in the code.

Let me know if any of that doesn't make sense. Hope it works for you.

(Apr 01 '13 at 22:58) Heids

Hi Heids,

OK yes got it ... finally.

Thank you so very much, I really do appreciate your time and assistance.

All the best.

Kind regards Hiroe.

(Apr 02 '13 at 10:08) Hiroe

So glad! Happy to help :)

(Apr 02 '13 at 21:37) Heids
Your Answer
toggle preview

Follow This Question

Once you sign in you will be able to subscribe for any updates here

Markdown Basics

  • *italic* or __italic__
  • **bold** or __bold__
  • link:[text]( "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: Apr 01 '13 at 08:35

Seen: 1,010 times

Last updated: Aug 10 '13 at 08:00

Established 2004 Handmade in NYC