Making Columns

Discussion in 'CSS' started by rowen77, May 18, 2009.

0
  1. #1
    I have a heading, and underneath it I want to make 3 columns that are made of unordered lists

    I then want to repeat this process again on the page a few times, ie, heading and columns

    Any help appreciated
     
    rowen77, May 18, 2009 IP
  2. alfa_375

    alfa_375 Active Member

    Messages:
    445
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #2
    This should work:

    
<html>
<head>
</head>
<body>
<table border=1>
  <tr>
   <td colspan=3>heading</td>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td>col1</td>
   <td>col2</td>
   <td>c0l3</td>
  </tr>
  <tr>
   <td>col1</td>
   <td>col2</td>
   <td>c0l3</td>
  </tr>
 </table> 
<body>
</html>
    Code (markup):
     
    alfa_375, May 18, 2009 IP
  3. caffeinatedworld

    caffeinatedworld Peon

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    alfa: why do you use tables - is it tabular data?

    Here is a nice CSS code for you:
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>This is the first column</title>
    <style type="text/css">
    body {
    margin: 0;
    padding: 20px;
    background: #FFF;
    }
    #header {
    width: 100%;
    height: 100px;
    background: #333333;
    }
    #columns ul {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 10px;
    }
    #columns ul li {
    width: 30%;
    margin-left: 1.5%;
    margin-right: 1.5%;
    height: 100px;
    float: left;
    background: red;
    margin-bottom: 10px;
    }
    </style>
    </head>
    <body>
    <div id="header"></div>
    <div id="columns">
    <ul>
    <li>This is the first column</li>
    <li>This is the second column</li>
    <li>This is the third column</li>
    <li>This is the first column</li>
    <li>This is the second column</li>
    <li>This is the third column</li>
    <li>This is the first column</li>
    <li>This is the second column</li>
    <li>This is the third column</li>
    </ul>
    </div>
    </body>

    </html>
     
    caffeinatedworld, May 19, 2009 IP