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 659249

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 Hiroe's gravatar image

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 Heids's gravatar image

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 Hiroe's gravatar image

So glad! Happy to help :)

(Apr 02 '13 at 21:37) Heids Heids's gravatar image
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:

×12
×9

Asked: Apr 01 '13 at 08:35

Seen: 1,575 times

Last updated: Aug 10 '13 at 08:00

Established 2004 Handmade in NYC