Web Design/3 column html


QUESTION: Thank you in advance for any help you can give me.
I am currently using and learning Dreamweaver to build my new site. I have 30 products which I will be selling on the site. I would like to arrange them in 3 equal centered columns on my 960px wide page as follows;

<h3>"NAME", space, space, space, "PRICE" </h3>
<p> "COLORS" </p>

col2 and col3 Same as above with 10px on both sides of col2. col1 float left,  col2 float right

If i can get the first row perfect then i can copy and paste for the rest.

Im having a problem getting this to work perfectly. Thanks again.

ANSWER: Sorry for the delay, did you want to use tables or divs for your columns?

---------- FOLLOW-UP ----------

QUESTION: I want to use divs. Thank you.

The Modern was would be to use flexbox. http://the-echoplex.net/flexyboxes/ has a GREAT builder. This can be quite difficult to learn though without a lot of experience.

The old, but still valid way would be something like this:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>This is a page</title>
     margin:0 auto;
     background-color:#fff; /* Remove this line later*/
  .col li{
     background-color:#222; /* Remove this line later*/
  .col li:nth-child(2){
     margin:0 15px;
     background-color:#777; /* Remove this line later*/

<div id="wrapper">
  <ul class="col">
     <li>Blah Blah</li>
     <li>Blah Blah Blah</li>

Web Design

All Answers

Answers by Expert:

Ask Experts


Jamison Mergens


I have over 17 years experience in website design, development and programming. I also am a custom dedicated server host. Pretty much anything related to "web" I can offer advice on. I can offer advice covering: html, html4, html5, css, css3, css animations, JavaScript, jQuery, PHP, server configurations, email related questions, SEO, marketing and business development.


Over 17 years experience in the web industry

Various local charities

Over 17 years working experience

©2017 About.com. All rights reserved.