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: http://www.macfilm.com/equipment/
Many thanks in advance.

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

0
1

Hi,

I would write the following html for your page:

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

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

link

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](http://url.com/ "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

Tags:

×2

Asked: Apr 01 '13 at 08:35

Seen: 1,010 times

Last updated: Aug 10 '13 at 08:00

Established 2004 Handmade in NYC