Right Column Being Pushed Down | Help Please [Archive]

mikegreenia.com

09-20-2008, 09:29 PM

Any idea why my rightcol is being pushed down? I've tried decreasing the size, clearing both, right and left, changed padding to 0. I can't figure it out. Any ideas? Here's the code:

CSS:

@charset "utf-8";
/* CSS Document
Background: #7BC2E0
Content: #85C6E2
Footer & Nav: #17302D
Hover: #8ECAE4
*/

body {
background:#7BC2E0;
}

#wrapper {
margin:0 auto;
width:960px;
}

img.banner {
padding: 50px 130px;
}

/*-----Navigation-----*/
a:link {
color:#CC0000;
font-weight:bold;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}
a:visited {
color:#CC0000;
font-weight:normal;
text-decoration:none;
}

div#navigation {
margin-top: 50px;
float:right;
}
ul#navmenu {
width:750px;
height:24px;
margin:0;
padding:0;
background:url(../img/navigation.jpg) no-repeat;
position:relative;
}
#navmenu li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navmenu li,#navmenu a {
height: 24px;
display: block;
}
img {
border:none;
}
#navmenu a{
text-decoration:none;
}
#navmenu a i {
visibility: hidden;
}

#about, #aboutcurrent {left: 0; width: 108px;}
#why, #whycurrent {left: 108px; width: 196px;}
#testimonials, #testimonialscurrent {left: 304px; width: 164px;}
#purchase, #purchasecurrent {left: 468px; width: 182px;}
#contact, #contactcurrent {left: 650px; width: 99px;}

#about a:hover,#about a:active, #aboutcurrent a {
background:transparent url(../img/navigation.jpg) 0 -24px no-repeat;
}
#why a:hover,#why a:active, #whycurrent a {
background:url(../img/navigation.jpg) -108px -24px no-repeat;
}
#testimonials a:hover,#testimonials a:active, #testimonialscurrent a {
background:url(../img/navigation.jpg) -304px -24px no-repeat;
}
#purchase a:hover,#purchase a:active, #purchasecurrent a {
background:url(../img/navigation.jpg) -468px -24px no-repeat;
}
#contact a:hover,#contact a:active, #contactcurrent a {
background:url(../img/navigation.jpg) -650px -24px no-repeat;
}
/*-----Navigation End-----*/

/*-----Front Page Box-----*/
.box {
width: 654px;
padding: 0 20px;
background-image: url(../img/mid.gif);
}
.box .top {
height: 16px;
font-size: 1px;
margin: 0 -20px;
background-image: url(../img/top.gif);
}
.box .bottom {
height: 12px;
font-size: 1px;
margin: 0 -20px;
background-image: url(../img/bot.gif);
}

.leftcol {
float:left;
width:214px;
border:1px solid green;
padding:0;
}

.midcol {
width:214px;
border:1px solid orange;
padding:0;
}

.rightcol {
float:right;
width:214px;
border:1px solid red;
padding:0;
}
/*-----Front Page Box End-----*/

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Acoustic Resources | Classroom Noise Reduction Product</title>
<link rel="stylesheet" type="text/css" href="css/acoustic-styles.css" />
</head>

<body>
<div id="wrapper">
<div id="navigation">
<ul id="navmenu">
<li id="about"><a href="#" title="About"></a></li>
<li id="why"><a href="#" title="Why"></a></li>
<li id="testimonials"><a href="#" title="Testimonials"></a></li>
<li id="purchase"><a href="#" title="Purchase"></a></li>
<li id="contact"><a href="#" title="Contact"></a></li>
</ul>
</div>
<img class="banner" src="img/main-banner.gif" alt="Is this the only time when things quiet down in your classroom?" />

<center><div class="box">
<div class="top"></div>
<div class="leftcol">
left
</div>
<div class="midcol">
middle
</div>
<div class="rightcol">
right
</div>
<div class="bottom"></div>
</div></center>
</div>
</body>
</html>

Link: http://www.acousticresources.net/redesign/

Hail-Storm

09-21-2008, 06:30 PM

I think this will work...

In the CSS, change .rightcol's float:right to float:left and add a float:left to the middle column as well. Like this:

.midcol {
float:left;
width:214px;
border:1px solid orange;
padding:0;
}

.rightcol {
float:left;
width:214px;
border:1px solid red;
padding:0;
}

Everything in the row should usually be float:left when you want it to be horizontal like that. =D

Centauri

09-22-2008, 02:42 AM

Any floated element needs to be declared before any unfloated content that the float needs to sit next to in the html. Therefore, .rightcol should come before .midcol in the html.

mikegreenia.com

09-22-2008, 11:47 AM

Any floated element needs to be declared before any unfloated content that the float needs to sit next to in the html. Therefore, .rightcol should come before .midcol in the html.

thanks, that worked