...

View Full Version : CSS Problem with rightcol displaying below leftcol in my web site need Help.



dbritt
05-19-2009, 06:20 PM
This is the URL to my site. http://www.cascade.k12.or.us/cjh/staff/dbritton/

The problem occurs in both IE and firefox. The rightcol is displayed below the leftcol instead of next to it. Any help would be appreciated I am a noob at using CSS.

Thank You in advance.

This is my CSS style sheet file.
body {
margin: 0;
padding:0;
background: #fff;
color: #666;
font: 100%/160% verdana,arial, helvetica, sans-serif;
}

#header {
width: 100%;
margin: 0;
height: 60px;
color: #000;
}

#pgheader {
width: 100%;
margin: 20px 20px 20px 220px;
height: 80px;
color: #000;
}

#pgheader2 {
width: 100%;
margin: 20px 20px 20px 220px;
height: 385px;
color: #000;
}

#leftcol {
width: 200px;
height: 400px;
float: left;
margin: 0;
}

#adcolumn {
width: 120px;
height: 800px;
float: right;
margin: 0;
}

#rightcol {
width: 55%;
margin: 20px 20px 20px 20px;
padding: 0;
border: 0;
font-size: 67%;
text-align: justify;
}

a,a:visited,a:active {
font-weight: bold;
color: #9FB6CD;
text-decoration: none;
outline: none;
}

a:hover {
color: #4A708B;
text-decoration: underline;
}

#nav {
padding-left: 30px;
margin: 5px 0 5px 0;
}

#nav {
font-size: 6px;
margin: 0;
padding: 10;
}

h1 {
font-size: 300%;
margin: 0 0 10px 0;
padding: 20px 0 0 20px;
letter-spacing: -2px;
text-transform: uppercase;
}

#leftcol h2 {
font-size: 122%;
text-transform: uppercase;
padding: 0 0 0 20px;
background: white url(img/line.gif) repeat-x 0% 5px;
height: 22px;
margin: 20px 0 0 18px;
}

h3 {
font-size: 182%;
color: #DC143C;
margin: 0px;
font-weight: normal;
line-height: normal;
}

h4 {
font-size: 152%;
text-transform: uppercase;
margin: 0;
padding-top: 15px;
}

h5 {
font-family: georgia,times new roman, times, serif;
font-size: 122%;
margin: 0;
font-weight: normal;
line-height: normal;
}

h6 {
font-size: 107%;
margin: 0;
line-height: normal;
}

#info {
border: 5px solid #B0C4DE;
text-align: center;
font-size: 92%;
}

.box {
margin: 0 0 20px 20px;
width: 180px;
background: #BCD2EE;
}

.header ul {
background: url(img/corners.gif) -15px -15px no-repeat;
height: 15px;
list-style: none;
margin: 0;
}

.header ul li {
float: right;
background: url(img/corners.gif) 0px -15px no-repeat;
width: 15px;
line-height: 15px;
}

#content {
font-size: 77%;
padding: 0 10px;
display: block;
line-height: 150%;
}

.footer ul {
background: url(img/corners.gif) -15px 0px no-repeat;
height: 15px;
list-style: none;
margin: 0;
}

.footer ul li {
float: right;
background: url(img/corners.gif) 0px 0px no-repeat;
width: 15px;
line-height: 15px;
}

.box a,.box a:active,.box a:visited {
color: #DC143C;
font-weight: bold;
}

.news {
border: 2px dotted #DC143C;
padding: 5px 10px 5px 10px;
margin: 20px 0px 20px 0px;
}

b,strong {
font-size: 122%;
}

.important {
font-size: 92%;
color: #000;
border-left: 1px solid #000;
margin: 20px 0 20px 30px;
padding-left: 10px;
line-height: 150%;
}

img {
float: left;
margin: 6px 10px 10px 0px;
}

.productdesc {
font-weight: bold;
line-height: 140%;
}

sobrien79
05-19-2009, 06:53 PM
dbritt, please use the [ CODE ][ /CODE ] (without the spaces) to wrap your code you are pasting in.

That said. Add:



#rightcol {
float: left;
}

Excavator
05-20-2009, 04:25 AM
Hello dbrit,

Instead of floating your #rightcol left, just give it enough left margin to clear the #leftcol ...
like this

#rightcol {
width: 55%;
margin: 20px 20px 20px 200px;
padding: 0;
border: 0;
background: #000;
font-size: 67%;
text-align: justify;
}
Have a look at a typical 2 column layout at http://nopeople.com/CSS/equal_length_columns/index.html - view the source to see how it's done.

Your #leftcol does not enclose it's content, put a background color on it just to see how it's not expanding to fit the content you've put in it.
Like this -

#leftcol {
width: 200px;
height: 400px;
float: left;
margin: 0;
background: #000;
}


If you remove the height: 400px; line you will see it grow to enclose all the content. At least you should, I didn't check but if you have anything floated in that column you may need to clear it. Have a look at the easy way of clearing floats (http://www.quirksmode.org/css/clearing.html) using overflow: auto;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum