Web Design/3 column html

Advertisement


Question
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;

[col1]
"image"
<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.

Answer
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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>This is a page</title>
<style>
  *{
     margin:0;
     padding:0;
  }
  body{
     background-color:tan;
     color:white;
  }
  #wrapper{
     margin:0 auto;
     width:960px;
     background-color:#fff; /* Remove this line later*/
  }
  .col li{
     display:block;
     width:310px;
     list-style-type:none;
     float:left;
     background-color:#222; /* Remove this line later*/
  }
  .col li:nth-child(2){
     margin:0 15px;
     background-color:#777; /* Remove this line later*/
  }
</style>
</head>

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

Web Design

All Answers


Answers by Expert:


Ask Experts

Volunteer


Jamison Mergens

Expertise

I have over 12 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.

Experience

Over 12 years experience in the web industry

Organizations
Various local charities

Education/Credentials
Over 12 years working experience

©2016 About.com. All rights reserved.