CSS SOS

[Jon]

I am trying to create a 3 column template by adding a third column to
my existing 2 colum one.

Here'swthat I have

div#mainClm{float:right;width:60%;margin:0px 10% 10% 0px;padding:0px 1%
0px 1%;border-left:dotted 1px #990000;}

div#sideBar{margin:20px 0px 0px 1em;padding:0px;text-align:left;}

div#rightCol{margin:20px 0px 0px
85%;padding:0px;text-align:center;border-left:dotted 1px #990000;}

The page shows three columns, but the text in the right one is at the
bottom (I can't get it to the top) and the right colum somehow starts
lower than the left one.

Here's the page if it helps to see it.

http://www.newsome.org/3col.html

I have tried for hours to figure this out, and would appreciate any
pointers. Thanks, JK

[Jon]

OK, I junked that CSS and wrote another one (I am just learning and so
bear with me). Now the text in the middle (the "Content") division,
aligns at the bottom of the page. I have spent hours trying to figure
out what is wrong, but I can't.

Here's the new CSS language. Any tips on how to get the text in the
middle division to the top would be greatly appreciated.

Thanks,
JK

***

#body {
margin:0px;
padding:0px;
background:#f6f6f6;
color:#000000;
font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-Serif;}

a{color:#DE7008;}
a:hover{color:#990000;}

#logo{
padding:0px;
margin:0px;
}

#container {
border: 0px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
text-align:left;
background: #FFF;
}

#banner {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border-top:1px solid #eeeeee;
border-bottom:dotted 1px #E0AD12;
background:#F5E39E;
color:white;
}

#content {
padding: 10px;
margin-right: 20%;
margin-left: 20%;
margin-bottom: 10px;
border-left:dotted 1px #990000;
border-right:dotted 1px #990000;
}

h1,h2,h3,h4,h5,h6{
padding:0px;
margin:0px;
}

h1{
padding:25px 0px 10px 5%;
border-top:double 3px #FFFFCC;
border-bottom:solid 1px #FFFFCC;
color:#FFFFCC;background:#000000;
font:bold 300% Verdana,Sans-Serif;
letter-spacing:-2px;
}

h2{
color:#000000;
font-weight:bold;
font-family:Verdana,Sans-Serif;
letter-spacing:-1px;
}

h3{
margin:10px 0px 0px 0px;
color:#990000;
font-size:105%;
}

h4{
color:#aa0033;
}

h6{
color:#990000;
font-size:120%;
}

#sidebar-a {
float: left;
width: 20%;
margin: 0px 5px 20px 0px;
padding: 10px;
text-align: left;
}

#sidebar-a ul{
margin:0px 0px 33px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
font-size:95%;
}

#sidebar-a li{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
font-size:95%;
}

#sidebar-b {
float: right;
width: 15%;
margin: 0px 0px 20px 5px;
padding: 10px;
text-align: center;
}

#sidebar-b ul{
margin:0px 0px 33px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
font-size:95%;
}

#sidebar-b li{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
font-size:95%;
}

#description{
padding:0px;
margin:7px 12% 7px 5%;
color:#9E5205;
background:transparent;
font:bold 85% Verdana,Sans-Serif;
}

..blogPost{
font-size:100%;
}

..blogPost strong{
color:#000000;
font-weight:bold;
}

#sidebar-a ul a{
padding:2px;
margin:1px;width:100%;
border:none;color:#999999;
text-decoration:none;
}

#sidebar-a ul a:link{
color:#999999;
}

#sidebar-a ul a:visited{
color:#999999;
}

#sidebar-a ul a:active{
color:#ff0000;
}

#sidebar-a ul a:hover{
color:#990000;
text-decoration:none;
}

#sidebar-b ul a{
padding:2px;
margin:1px;
width:100%;
border:none;
color:#999999;
text-decoration:none;
}

#sidebar-b ul a:link{
color:#999999;
}

#sidebar-b ul a:visited{
color:#999999;
}

#sidebar-b ul a:active{
color:#ff0000;
}

#sidebar-b ul a:hover{
color:#990000;
text-decoration:none;
}

pre,code{color:#999999;}
strike{color:#999999;}

..bug{
padding:5px;
border:0px;
}

..byline{
padding:0px;
margin:0px;
color:#444444;
font-size:80%;
}

..byline a{
border:none;
color:#968A0A;
text-decoration:none;
}

..byline a:hover{
text-decoration:underline;
}

#footer {
clear: both;
padding: 10px;
margin-top: 5px;
border: 0px solid gray;
text-align: center;
}

[kchayka]

Jon wrote:

I am trying to create a 3 column template by adding a third column to
my existing 2 colum one.

Why reinvent the wheel?
<URL:http://css-discuss.incutio.com/?page=ThreeColumnLayouts>

You might want to browse around the site while you're there and read up
on the box model and using the various positioning methods.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.