4 replies [Last post]
josev
Offline
newbie
Last seen: 14 years 24 weeks ago
Joined: 2006-04-12
Posts: 7
Points: 0

Hi there, I need help converting a 2 column layout to a 3 column layout. Here is the html and css code. Thanks

<html>
<head>

<link rel="stylesheet" type="text/css" href="...-stylesheet.css" />

</head>
<body>
<div align="center">

<div class="container">
<div class="header">
<h1 class="header">
Header
</h1>
</div>
<div class="content">
<p class="six">

content
<br />
content
<br />
content
<br />
content
<br />
content
<br />
content
<br />
content
<br />
content
<br />
content
<br />
content
<br />
content
<br />
content
<br />
content
<br />
content
<br />
content
<br />

</p>

</div>


<div class="rightcolumn">
<p class="two">
1234
<br />
1234
<br />1234
<br />1234
<br />1234
<br />1234
<br />1234

</p>

</div>



<div class="footer">
<p class="three">
copyright

</p>
</div>

</div>

</div>


</body>
</html>

div.container
{
width:100%;
margin:0px;
border:0px solid gray;
line-height:150%;
background-color:#F5F5F5;
}
div.header
{
padding:0.5em;
color:#000000;
background-color:#F5F5F5;
clear:left;
font-family:arial;
}
div.content
{
float:left;
width:600px;
margin:0;
padding:1em;
border-right:0px solid gray;
background-color:#F5F5F5;
}
div.rightcolumn
{
margin-left:15px;
border-left:0px solid gray;
padding:0em;
background-color:#F5F5F5;
border-style: solid;
border-bottom-width: 0px;
border-left-width: 1px;
border-right-width: 0px;
border-top-width: 0px;
}
div.footer
{
padding:0.5em;
color:#000000;
background-color:#F5F5F5;
clear:left;
font-family:arial;
border-style: solid;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 1px;
}
h1.header
{
padding:0;
margin:0;
font-family: Comic Sans MS, arial;
color: #003399;
text-align: center;
border-style: solid;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

3 column layout help

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

josev
Offline
newbie
Last seen: 14 years 24 weeks ago
Joined: 2006-04-12
Posts: 7
Points: 0

3 column layout help

Thanks. For the moment though, could you just give me the code to add a third column to the far right Laughing out loud

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

3 column layout help

Sorry, this forum's based on users showing that they're making an effort to do things themselves. If you just want someone to do it for you, then you need to pay for that sort of service.
If you at least try one of the layouts on the link I gave but still have problems, then people will be happy to help.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

josev
Offline
newbie
Last seen: 14 years 24 weeks ago
Joined: 2006-04-12
Posts: 7
Points: 0

3 column layout help

lol Laughing out loud I've already got the layout to work from one of the links you supplied, just gotta work out some kinks. Thanks