Right hand colom slips down in FF & safari could be a "clear" issue?

Hi, I'm a CSS newbie. I have a design that I have put together which basically two colomns and fixed. The wider left hand colomn is divided into 2 rows. The problem is that is that, viewed in FF and safari, the right hand colomn drops down and aligns with the bottom row, instead of the top row. see for you self:

I am wonering I have used the "clear" attribute correctly. Hope anyone can help.

My code is as follws:
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=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/rounded.css" rel="stylesheet" type="text/css" />
<link href="css/body.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<div class="curvedArea">
<div class="topLeft">
<div class="topRight">
 </div>
</div>
<div class="centerRight">
<div class="centerLeft">
<div class="content">
<div id="banner"><img src="images/logo.gif" width="144" height="99" />
<div class="navcontainer">Content for class "navcontainer" Goes Here</div>
</div>

<div id="colomncontainer">
<div id="colonleft_container">
<div id="colomn_left">
<div class="boxtop_cl" id="left_top"> Latest</div>
<p class="colright_content">Vivamus a nisl vitae erat adipiscing gravida. Vivamus ut eros. Etiam nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam vitae lorem eu metus suscipit laoreet. In hac habitasse platea dictumst. Nullam libero eros, rutrum sed, dapibus at, condimentum nec, nunc. In eu nunc a ligula sagittis mollis. Cras ut tellus eget nisl fringilla vestibulum. In condimentum eros eget nisi. Cras pretium, magna et gravida fermentum, justo justo scelerisque metus, ac blandit nunc ipsum nec orci. Ut orci. Nam ultrices. Morbi accumsan orci eget mauris. Aliquam pede nulla, posuere ac, lobortis a, vestibulum eget, est. Etiam rutrum, metus a molestie pulvinar, odio lorem malesuada turpis, eget hendrerit velit nisl sit amet turpis. Etiam laoreet. </p>
</div>
<div class="clear" id="colomn_left_bottom">
<div class="boxtop_cl" id="left_bottom"> New Releases</div>
<p class="colright_content">Vivamus a nisl vitae erat adipiscing gravida. Vivamus ut eros. Etiam nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam vitae lorem eu metus suscipit laoreet. In hac habitasse platea dictumst. Nullam libero eros, rutrum sed, dapibus at, condimentum nec, nunc. In eu nunc a ligula sagittis mollis. Cras ut tellus eget nisl fringilla vestibulum. In condimentum eros eget nisi. Cras pretium, magna et gravida fermentum, justo justo scelerisque metus, ac blandit nunc ipsum nec orci. Ut orci. Nam ultrices. Morbi accumsan orci eget mauris. Aliquam pede nulla, posuere ac, lobortis a, vestibulum eget, est. Etiam rutrum, metus a molestie pulvinar, odio lorem malesuada turpis, eget hendrerit velit nisl sit amet turpis. Etiam laoreet. </p>
</div>
</div>
<div id="colomn_right">
<div class="boxtop_cr" id="right_top"> News</div>
<div class="colright_content">
<p>CDonec tristique, augue suscipit sodales condimentum, dui lorem convallis sem, quis feugiat lectus sem non dolor. Pellentesque rutrum enim quis ipsum. Cras mollis. Praesent libero lacus, rutrum eget, tincidunt dictum, tincidunt eu, odio. Duis vulputate.</p>
<p>Donec tristique, augue suscipit sodales condimentum, dui lorem convallis sem, quis feugiat lectus sem non dolor. Pellentesque rutrum enim quis ipsum. Cras mollis. Praesent libero lacus, rutrum eget, tincidunt dictum, tincidunt eu, odio. Duis vulputate. </p>
<p>Donec tristique, augue suscipit sodales condimentum, dui lorem convallis sem, quis feugiat lectus sem non dolor. Pellentesque rutrum enim quis ipsum. Cras mollis. Praesent libero lacus, rutrum eget, tincidunt dictum, tincidunt eu, odio. Duis vulputate. </p>
<p>Donec tristique, augue suscipit sodales condimentum, dui lorem convallis sem, quis feugiat lectus sem non dolor. Pellentesque rutrum enim quis ipsum. Cras mollis. Praesent libero lacus, rutrum eget, tincidunt dictum, tincidunt eu, odio. Duis vulputate. </p>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="bottomLeft">
<div class="bottomRight">
 
</div>
</div>
</div>
</body>
</html>

CSS
.curvedArea {
margin: 0 auto;
display: block;
width: 778px }

.topLeft {
background-image:url(img/top_left2.gif);
margin:0;
width: 100%;
height: 10px;
float: left }

.topRight {
background-image: url(img/top_right.gif);
background-repeat: no-repeat;
background-position: 100% 0;
margin:0;
width: 20px;
height: 10px;
float: right }

.centerLeft {
background-image: url(img/edge_left.gif);
background-repeat: repeat-y;
width: 100%;
float: left }

.centerRight {
background-image: url(img/centre_right.gif);
background-repeat: repeat-y;
background-position: 100% 0;
width: 100%;
height: 100%;
float: right }

.bottomLeft {
background-image: url(img/bottom_left.gif);
background-repeat: no-repeat;
width: 100%;
float: left }

.bottomRight {
background-image: url(img/bottom_right.gif);
background-repeat: no-repeat;
background-position: 100% 0;
width: 20px;
height: 52px;
float: right }

.content {
margin-right: 25px;
margin-left: 25px;
}

.clear {
clear: both }

#banner {
background-color: #909079;
}
.navcontainer {
margin-top:10px;
background-color: #99FFFF;
}
#colomncontainer {
margin-top:10px;
}
#colonleft_container {
margin:0px;
width:100%:;
}
#colomn_left {float:left;
width: 459px;
background-color:#b0c0ac;
margin-bottom:10px;
}

#colomn_left_bottom {float:left;
width: 459px;
background-color:#b0c0ac;
clear:both;
}

#colomn_right {
float:right;
width:258px;
background-image:url(img/boxbottom.gif);
background-repeat:no-repeat;
background-position:bottom;
background-color:#b0c0ac;
}
.colright_content{
padding:0px 10px 5px 10px;
font-size: 0.9em;
}

.boxtop_cr {
background-color:#909079;
background-image:url(img/boxtop_side.gif);
background-position:top;
margin:0px;
padding-left: 10px;
font-weight: bold;
color: #6A6A57;
}

.boxtop_cl {
background-color:#909079;
background-image:url(img/boxtop_main.gif);
background-position:top;
background-repeat:no-repeat;
margin:0px;
padding-left: 10px;
font-weight: bold;
color: #6A6A57;
}
.clear {clear:both;}

[edited by: jatar_k at 1:48 pm (utc) on Sep. 11, 2007]
[edit reason] no urls thanks [/edit]

Right hand colom slips down in FF & safari could be a "clear" issue?

CSS layout problem

bemi

jatar_k

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week