9 replies [Last post]
abreiner
Offline
newbie
Last seen: 15 years 21 weeks ago
Joined: 2005-05-04
Posts: 7
Points: 0

I have been looking every where for this. I want a three column layout with a footer. However I want each column to have the same width. Can someone please give me some ideas.

Thanks for any help you can provide.

<edit>
It should also have a header.
</edit>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 4 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

3 column layout

In its simplest form,
pseudo code

header
col 1 width 33% float left
col 2   "    "    "    "
col 3   "    "    "    "
footer clear both
You could wrap the whole thing and center the wrapper. Get some code going, and bring us the bumps in your road.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

abreiner
Offline
newbie
Last seen: 15 years 21 weeks ago
Joined: 2005-05-04
Posts: 7
Points: 0

3 column layout

Thanks!!!

This has been bothering me for a while. It worked just fine for my needs.

Andy B.

deadhippo
Offline
Regular
Japan
Last seen: 15 years 17 weeks ago
Japan
Timezone: GMT+9
Joined: 2005-05-31
Posts: 16
Points: 0

3 column layout

hi
i also wanted a 3 column layout and i stripped my code down to resemble the advice here
but my columns in dreamweaver dont render as column on firefox or ie
this is my code
does anybody know what im doing wrong

Quote:
#1column {
float: left;
width: 25%;
text-align: center;
}
#2column {
float: left;
width: 25%;
text-align: center;
}
#3column {
float: left;
width: 50%;
}

it is surrounded by a foote and a header which are both clear:both

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 4 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

3 column layout

We couldn't possibly comment until you show us the rest of the code. It could be any number of problems.

Verschwindende wrote:
  • CSS doesn't make pies

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 20 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

3 column layout

One thing I would do is reduce the final #3column width to 49% just in case there are other issues leading to width>100%. Make sure you have no margins, borders or padding on your three floated blocks - they should just be pure widths - no other dimensions. I would also suggest giving the body and each div contrasting background colors for now.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

deadhippo
Offline
Regular
Japan
Last seen: 15 years 17 weeks ago
Japan
Timezone: GMT+9
Joined: 2005-05-31
Posts: 16
Points: 0

3 column layout

DCElliott wrote:
One thing I would do is reduce the final #3column width to 49% just in case there are other issues leading to width>100%. Make sure you have no margins, borders or padding on your three floated blocks - they should just be pure widths - no other dimensions. I would also suggest giving the body and each div contrasting background colors for now.

DE this didnt work and the colors in left and right column didnt render

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 column layout

id's (and classes) shouldn't begin with a numeral, they should begin with a letter. Numerals can be the second or subsequent characters.

deadhippo
Offline
Regular
Japan
Last seen: 15 years 17 weeks ago
Japan
Timezone: GMT+9
Joined: 2005-05-31
Posts: 16
Points: 0

3 column layout

thepineapplehead wrote:
We couldn't possibly comment until you show us the rest of the code. It could be any number of problems.

Quote:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #324F58;
margin-bottom: 5px;
}

#navBar {
width: 706px;
margin-right: auto;
margin-left: auto;
border: 3px solid #FFFFFF;
text-align: center;
}
#navBar td {
width: 20%;
text-decoration: none;
background-color: #95A7BB;
}
#navBar a:link, #navBar a:active, #navBar a:visited {
font-family: Arial, Helvetica, sans-serif;
color: #324F58;
text-decoration: none;
}
#navBar a:hover {
color: #FFFFFF;
background-color: #95A7BB;
font-weight: bold;
}
#container {
padding: 0px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
border: 3px solid #FFFFFF;
width: 700px;
background-color: #CCD8E8;
}
#header {
background-image: url(../images/backgrounds/light_header.jpg);
background-repeat: no-repeat;
position: relative;
height: 260px;
width: 700px;
top: 0px;
clear: both;
}
#1column {
float: left;
width: 33%;
position: relative;
background-color: #009999;
margin: 0px;
padding: 0px;
}
#2column {
float: left;
width: 33%;
position: relative;
background-color: #009966;
margin: 0px;
padding: 0px;
clear: none;
}
#3column {
float: left;
width: 33%;
position: relative;
background-color: #CC9966;
}
#footer {
background-image: url(../images/backgrounds/light_footer.jpg);
background-repeat: no-repeat;
position: relative;
background-position: center bottom;
width: 700px;
height: 200px;
bottom: 0px;
clear: both;
}

here is the relevant code
the nav bar is positioned outside and b4 the container and its divs

i changed it to 33% per column just for testing purposes,
the two left columns will be smaller than the right column and equal in width to each other

deadhippo
Offline
Regular
Japan
Last seen: 15 years 17 weeks ago
Japan
Timezone: GMT+9
Joined: 2005-05-31
Posts: 16
Points: 0

3 column layout

Chris..S wrote:
id's (and classes) shouldn't begin with a numeral, they should begin with a letter. Numerals can be the second or subsequent characters.

thanks that was the answer Laughing out loud Laughing out loud