It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index Programming HTML Forum

3 Column Layout

3 Column Layout

Postby ArchemyDesign on Thu Sep 09, 2010 8:03 pm

I am very new to HTML and cant figure out why my 3-column layout isnt working. I cant seem to get my columns to line up side-by-side without overlapping ...
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!--  Created with the CoffeeCup HTML Editor 2006  -->
<!--           http://www.coffeecup.com/           -->
<!--        Brewed on 9/9/2010 12:48:26 PM         -->

<head>
    <title>Zone Map</title>
<style type="text/css">

#head {
position: relative;
left: 0px;
width: 250px;
height: 20px;
font-family: times new roman;
line-height: 8px;
font-size: 14pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #c3bd24;}

#content {
left: 0px;
width: 250px;
font-family: times new roman;
line-height: 16px;
font-size: 10pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #938461;}

#dotted{
width: 225px;
border-top: 2px dotted #c3bd24;
}

#container {
width: 800px;
}

#col_right {
position: relative;
float: right;
width: 250px;
}

#col_center {
position: absolute;
float: center;
width: 250px;
}

#col_left {
position: relative;
float: left;
width: 250px;
}
</style>
</head>

<body>
<p align="center">
     <img border="0" alt="" align="left" src="support/image/ZoneMap.png" width="650" height="400"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>

<div id="container">

<div id="col_left"> 
 
<p id="head"><br>ZONE 1: $750 minimum</p>

<div id="dotted"></div>

<p id="content">
NJ    all,<br>
NY   Long Island to Islip,<br>
MD   to Salisbury,<br>
PA   Pittsburgh-Williamsport-Wilkes Barre,<br>
VA   Richmond-Front Royal,<br>
WV  to Martinsburg, Fairmont,<br>
DE   all</p>
</div>

<div id="col_center">

<p id="head"><br>ZONE 2: $1,500 minimum</p>

<div id="dotted"></div>

<p id="content">
NY   Syracuse-Albany-Long Island,<br>
CT   Hartford-New Haven,<br>
PA   west of Pittsburgh-Erie,<br>
OH   Sandusky-Columbus, Ashland,<br>
VA   south of Richmond-Roanoke,<br>
WV   south and west of Fairmont to Bluefield,<br>
MA   Pittsfield-Buzzards Bay-Monomet</p>
</div>

<div id="col_right">

<p id="head"><br>ZONE 3: $2,500 minimum</p>

<div id="dotted"></div>

<p id="content">
VA   south and west of Roanoke,<br>
TN   Chattanooga-Nashville,<br>
KY   Hopkinsville-Madisonville,<br>
IN   Evansville,<br>
IL   Urbana, Chicago,<br>     
MI</p>
</div>

</div>
</body>
</html>

ArchemyDesign
 
Posts: 2
Joined: Thu Sep 09, 2010 7:59 pm

Re: 3 Column Layout

Postby webmaster on Thu Sep 09, 2010 10:15 pm

Here's a good site for playing with CSS columns:
http://www.maxdesign.com.au/articles/css-layouts/
User avatar
webmaster
Site Admin
 
Posts: 2695
Joined: Tue Aug 17, 2004 1:07 pm
Location: Sweden

Re: 3 Column Layout

Postby HotNoob on Mon Sep 20, 2010 11:07 pm

rather than using divs,and mass amounts of CSS try using html tables.
Yes people say they are out-of-date and should never be used, but the people who say that don't know what they are talking about.

Both tables and divs have their uses, and neither should be used excessively, especially when the other can do it better.

Code: Select all
<table width=100%>
    <tr>
        <td style='background-color:#FFFFFF;'>
            Column 1
            <br />Here is some example text
            <br />LALALALALA
            <br />Moo!
        </td>
        <td style='background-color:#EEEEEE;'>
            Column 2
            <br />Here is some example text
            <br />LALALALALA
            <br />Moo!
        </td>
        <td style='background-color:#DDDDDD;'>
            Column 3
            <br />Here is some example text
            <br />LALALALALA
            <br />Moo!
        </td>
    </tr>
</table>

there you go, if you want to get rid of the white space inbetween, just set the table's cellspacing and cellpadding to 0.

enjoy.
HotNoob
100+ Club
 
Posts: 169
Joined: Sun May 02, 2010 1:38 am


Who is online

Users browsing this forum: No registered users and 4 guests