Hello,

I am trying to convert a 2 column layout into 3 columns, basically duplicating the left hand side column to a new 3rd right hand side column. The css is almost identical, only the width of the 2 columns (left and right side) differ. But for some reason, a small part of the 3rd column, is visible at the right hand side bottom of the MIDDLE Column! I dont know why this is happening. Please visit http://aquariusweb.in/clients/cw/RubyX/ to see the design and the error....This error is repeating across every single block of text in the middle column

The CSS Code is given below:

Please note that the name of left side column is 'coll' and that of right side column is 'col'

Structure:
        display | position | float | overflow | width | height | border | margin | padding | background | align | font
*/

* {min-height:1px;}
body {border:0; margin:0; padding:0; background:#fff1f3 url("../design/bg.gif") 0 0 repeat-x; font:70%/160% "verdana",sans-serif; color:#7f000b; _text-align:center;}

a {color:#7f000b;}
a:hover {color:#ff2740;}

p {border:0; margin:15px 0; padding:0;}

div {display:block; border:0; margin:0; padding:0;}

h1, h2, h3, h4, h5 {border:0; margin:15px 0 10px 0; padding:0; font-weight:bold;}
h1 {font-size:260%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
h2 {font-size:180%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
h3 {font-size:120%; line-height:100%; font-weight:bold;}
h4 {font-size:120%;}
h5 {font-size:100%;}

table {display:table; border-collapse:collapse; margin:15px 0; padding:0; border:1px solid #ffaec0; font-size:100%;}
tr {display:table-row;}
th, td {display: table-cell; border:1px solid #ffaec0; margin:0; padding:5px; vertical-align:top; text-align:left;}
th {background:#ffe5e9; text-align:center; color:#7f000b; font-weight:bold;}

ul, ol {display:block; border:0; margin:15px 0 15px 40px; padding:0;}
ol {list-style-type:decimal;}
li {display:list-item; border:0; margin:0; padding:0; _height:1px;}
ul ul, ul ol, ol ol, ol ul {margin: 0 0 0 20px;}

dl {border:0; margin:15px 0; padding:0;}
dt {border:0; margin:0; padding:0; font-weight:bold;}
dd {border:0; margin:0 0 0 30px; padding:0;}

form {border:0; margin:0; padding:0;}
fieldset {border:1px solid #ccc; margin:15px 0; padding:10px;}
legend {margin-left:10px; font-size:100%; font-weight:bold; color:#008;}

hr {display:block; height:1px; margin:10px 0; padding:0; background:#CCC; border:0 solid #CCC; color:#CCC;}

a, img, span {border:0; margin:0; padding:0;}
abbr, acronym {border-bottom:1px dotted #CCC; cursor:help;}

del, .through {text-decoration:line-through;}
strong, .strong {font-weight:bold;}
cite, em, q, var {font-style:italic;}
code, kbd, samp {font-family:monospace; font-size:110%;}

/* Floating */
.f-left {float:left;}
.f-right {float:right;}

/* Text align */
.t-left {text-align:left;}
.t-center {text-align:center;}
.t-right {text-align:right;}

.va-middle {vertical-align:middle;}

.clear {clear:both;}
.box {min-height:1px; _height:1px;}
.box:after {content:"."; display:block; line-height:0px; font-size:0px; visibility:hidden; clear:both;}

.nom {margin:0;}
.noscreen {display:none;}

/* -----------------...........--------------------------------------------------------------------------------------- */

#main {width:1020px; margin:50px auto 0 auto; _text-align:left;}

/* Header */
#header {position:relative; width:770px; height:100px; margin:0; padding:0; background:#233C9B url("../design/header.jpg") 0 0 no-repeat; color:#FFF;}

    /* Header - logo */
    #header #logo {position:absolute; top:35px; left:35px; margin:0;}

    #header #logo a {color:#FFF;}
    #header #logo a:hover {color:#ff99b2; text-decoration:underline;}
    
    /* Header - Search */
    #header #search {position:absolute; top:35px; right:20px;}
    #header #search form {position:relative;}
    #header #search #search-input-out {position:absolute; top:0; right:45px; width:155px; height:28px; margin:0; padding:0; border:0; background:url("../design/search_input.gif") 0 0 no-repeat; font:bold 90%/100% "verdana",sans-serif; color:#7f000b;}
    #header #search #search-input {width:140px; margin:5px 8px; padding:3px 0; border:0; background:#FFF; font:bold 100%/100% "verdana",sans-serif; color:#7f000b;}
    #header #search #search-submit {position:absolute; top:0; right:0px;}
    #header #search fieldset {margin:0; padding:0; border:0;}
    #header #search fieldset {width:200px;}
    #header #search legend {display:none;}

/* Main menu (tabs) */
#tabs {background:#7f000b; margin:0 5px; padding:10px 0 0 0; _height:1px;}

    #tabs ul {margin:0 10px; padding:0; list-style:none;}
    #tabs ul li {margin:0 5px 0 0; padding:0; float:left;}
    #tabs ul li a {display:block; position:relative; padding:7px 15px; border:0; background:url("../design/tab_link.gif") 0 0 repeat-x; color:#ff99b2; font-weight:bold; text-decoration:none; cursor:pointer;}
    
    /* Main menu (tabs - link) */
    #tabs ul li a span.tab-l, #tabs ul li a:hover span.tab-l {position:absolute; top:0; left:0; _left:-15px; width:8px; height:8px; background:url("../design/tab_link_l.gif") 0 0 no-repeat;}
    #tabs ul li a span.tab-r, #tabs ul li a:hover span.tab-r {position:absolute; top:0; right:0; _right:-1px; width:8px; height:8px; background:url("../design/tab_link_r.gif") 100% 0 no-repeat;}
    
    /* Main menu (tabs - hover) */
    #tabs ul li a:hover {background:url("../design/tab_hover.gif") 0 0 repeat-x; color:#FFF;}
    #tabs ul li a:hover span.tab-l {background:url("../design/tab_hover_l.gif") 0 0 no-repeat;}
    #tabs ul li a:hover span.tab-r {background:url("../design/tab_hover_r.gif") 100% 0 no-repeat;}
    
    /* Main menu (tabs - active) */
    #tabs ul li#active a {background:#FFF; color:#FF0000;}
    #tabs ul li#active a span.tab-l {position:absolute; top:0; left:0; _left:-15px; width:8px; height:8px; background:url("../design/tab_active_l.gif") 0 0 no-repeat;}
    #tabs ul li#active a span.tab-r {position:absolute; top:0; right:0; width:8px; height:8px; background:url("../design/tab_active_r.gif") 100% 0 no-repeat;}

/* Page (2 columns) */
#page {width:990px; min-height:1px; background:#FFF url("../design/bg_page.gif") 0 0 repeat-y; _height:1px;}
#page-in {min-height:1px; padding:10px 0; background:url("../design/bg_page_in.jpg") 0 0 no-repeat; _height:1px;}

/* Strip */
#strip {position:relative; clear:both; padding:3px 20px 10px 20px; color:#ff335e;}
#strip p {margin:0;}
#strip a {color:#ff335e;}
#strip a:hover {color:#7f000b;}

    /* Strip - breadcrumbs */
    #strip #breadcrumbs {width:520px; margin:0; padding:0;}
    
    /* Strip - RSS */
    #strip #rss {float:right; width:175px; _width:200px; margin:0; padding-left:25px; background:url("../design/ico_rss.gif") 0 50% no-repeat}


/* left column is 'coll', right column is 'col' */
#coll {float:left; width:240px; margin:0; padding:0; background:#ffc8d4 url("../design/col_bg.jpg") 0 0 repeat-y;}
#coll-in {padding:20px 10px; background:url("../design/col_top.jpg") 0 0 no-repeat;}
#coll h3 {padding:13px 15px 14px 15px; margin:0 -10px 15px -10px; background:#ff94ab url("../design/col_title_bg.jpg") 0 0 repeat-y; color:#7f000b;}

    /* left column - About me */
    #coll #about-me {margin-bottom:15px; line-height:130%;}
    #coll #about-me p {margin:0;}
    #coll #about-me #me {float:left; width:54px; height:58px; margin-right:7px;}

    /* left column - Category */
    #coll ul#category {margin:15px 0; padding:0; list-style:none;}
    #coll ul#category li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
    #coll ul#category li a {display:block; padding:3px 0 3px 22px; background:url("../design/ico_archive.gif") 5px 6px no-repeat; text-decoration:none;}
    #coll ul#category li a:hover {background-color:#ffccd8; color:#7f000b;}
    #coll ul#category li#category-active a {background:#ffdbe3 url("../design/ico_archive2.gif") 5px 50% no-repeat; font-weight:bold;}
    
    /* left column - Archive */
    #coll ul#archive {margin:15px 0; padding:0; list-style:none;}
    #coll ul#archive li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
    #coll ul#archive li a {display:block; padding:3px 0 3px 22px; background:url("../design/ico_archive.gif") 5px 50% no-repeat; text-decoration:none;}
    #coll ul#archive li a:hover {background-color:#ffccd8; color:#7f000b;}
    #coll ul#archive li#archive-active a {background:#ffdbe3 url("../design/ico_archive2.gif") 5px 6px no-repeat; font-weight:bold;}
    
    /* left column - Links */
    #coll ul#links {margin:15px 0; padding:0; list-style:none;}
    #coll ul#links li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
    #coll ul#links li a {display:block; padding:3px 0 3px 22px; background:url("../design/ico_links.gif") 5px 6px no-repeat; text-decoration:none;}
    #coll ul#links li a:hover {background-color:#ffccd8; color:#7f000b;}





/* Content */
#content {float:left; width:530px; _width:550px; margin:0; padding:0 0 0 20px;}

    /* Content - article */
    #content .article {clear:both; margin:0; padding:20px; background:url("../design/content_article_bg.jpg") 0 0 no-repeat;}
    #content .article h2 {margin:0 -20px; padding:10px; background:#ffdce1 url("../design/content_title_bg.gif") 0 0 repeat-y; color:#7f000b;}
    #content .article h2 span {background:url("../design/ico_list.gif") 0 50% no-repeat; padding-left:25px;}
    
    #content .article p {text-align:justify;}
    #content .info {margin:10px 0; padding-bottom:8px; border-bottom:1px solid #ffdce1; color:#ff3360;}
    #content .info a {color:#ff3360;}
    #content .info a:hover {color:#FF0000;}
    
    #content .info span.date, #content .info span.cat, #content .info span.user, #content .info span.comments {padding-left:15px;}
    #content .info span.date {background:url("../design/ico_date.gif") 0 50% no-repeat;}
    #content .info span.cat {background:url("../design/ico_cat.gif") 0 50% no-repeat; margin-left:8px;}
    #content .info span.user {background:url("../design/ico_user.gif") 0 50% no-repeat; margin-left:8px;}
    #content .info span.comments {background:url("../design/ico_comments.gif") 0 50% no-repeat; margin-left:8px;}

    /* Content - More */
    #content .btn-more {margin:0 0 15px 0; padding:0; border:0; position:relative;}
    #content .btn-more a {display:block; position:absolute; top:0; right:0; width:67px; _width:95px; height:21px; margin:0; padding:0 0 0 28px; background:url("../design/btn_more.gif") 0 0 no-repeat; color:#FFF; text-decoration:none;}
    #content .btn-more a:hover {background:url("../design/btn_more.gif") -95px 0 no-repeat;}

/* Right column: left column is 'coll', right column is 'col' */
#col {float:right; width:200px; margin:0; padding:0; background:#ffc8d4 url("../design/col_bg.gif") 0 0 repeat-y;}
#col-in {padding:20px 10px; background:url("../design/col_top.gif") 0 0 no-repeat;}
#col h3 {padding:13px 15px 14px 15px; margin:0 -10px 15px -10px; background:#ff94ab url("../design/col_title_bg.gif") 0 0 repeat-y; color:#7f000b;}

    /* Right column - About me */
    #col #about-me {margin-bottom:15px; line-height:130%;}
    #col #about-me p {margin:0;}
    #col #about-me #me {float:left; width:54px; height:58px; margin-right:7px;}

    /* Right column - Category */
    #col ul#category {margin:15px 0; padding:0; list-style:none;}
    #col ul#category li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
    #col ul#category li a {display:block; padding:3px 0 3px 22px; background:url("../design/ico_archive.gif") 5px 6px no-repeat; text-decoration:none;}
    #col ul#category li a:hover {background-color:#ffccd8; color:#7f000b;}
    #col ul#category li#category-active a {background:#ffdbe3 url("../design/ico_archive2.gif") 5px 50% no-repeat; font-weight:bold;}
    
    /* Right column - Archive */
    #col ul#archive {margin:15px 0; padding:0; list-style:none;}
    #col ul#archive li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
    #col ul#archive li a {display:block; padding:3px 0 3px 22px; background:url("../design/ico_archive.gif") 5px 50% no-repeat; text-decoration:none;}
    #col ul#archive li a:hover {background-color:#ffccd8; color:#7f000b;}
    #col ul#archive li#archive-active a {background:#ffdbe3 url("../design/ico_archive2.gif") 5px 6px no-repeat; font-weight:bold;}
    
    /* Right column - Links */
    #col ul#links {margin:15px 0; padding:0; list-style:none;}
    #col ul#links li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
    #col ul#links li a {display:block; padding:3px 0 3px 22px; background:url("../design/ico_links.gif") 5px 6px no-repeat; text-decoration:none;}
    #col ul#links li a:hover {background-color:#ffccd8; color:#7f000b;}

/* Footer */
#footer {position:relative; clear:both; width:770px; height:60px; margin-bottom:50px; background:url("../design/footer.jpg") 0 0 no-repeat; color:#ff3360;}
#footer a {color:#ff3360;}
#footer a:hover {color:#7f000b;}

    /* Footer - "back on top" */
    #top {position:absolute; top:55px; left:550px;}
    #top p {position:relative; width:30px; height:25px; margin:0; overflow:hidden;}
    #top p span {display:block; position:absolute; left:0; top:0; z-index:1; width:30px; height:25px; background:url("../design/ico_top.gif") 0 0 no-repeat; cursor:pointer;}
    #top a:hover span {background:url("../design/ico_top.gif") -30px 0 no-repeat;}

    /*  Footer - copyright */
    #footer p#copyright {position:absolute; top:10px; left:40px; margin:0;}

    /* Footer - created by */
    #createdby {position:absolute; top:10px; left:562px; margin:0; color:#ff6587;}
    #createdby a {color:#ff6587;}

You'll need to set it right floated, instead of having it floated on the left.
e.g.

#col {
   float : right;
   clear : right;
  /* your next rule */
   }

Hello essential,

The left side column 'coll' is floated left, and the right side column 'col' is floated right, going by what you have written I floated both the columns to right float, but then the 2 side columns are bunching up together at the right side of screen while middle column becomes the left column. Does something else also have to be done

Thanks,
Arvind

It's really hard to provide exact solution, especially if you're not the one who created the page.

But here's a simple layout technique that applies and behave in different browsers.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tansitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>3 Column floated Layers Sample</title>
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #fff;  
  color : #fff;
  font : normal normal normal 90%/1.6 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  margin : 0;
  padding : 0;
  min-width : 800px;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

div {
  border : none;
  margin : 0;
  padding : 0;
  }

div#header {
  background-color : #ffb6c1;
  clear : both;
  float : left;
  height : auto;
  min-height : 200px;
  max-height : 200px;
  width : 100%; } div#header table { min-height : 200px; max-height : 200px; }

div#box {
  text-align : center;
  margin : 0 auto;
  width : 50%; }

h1 { margin : 0 auto; padding : 0; font-size : 180%; }

table {
  border-collapse : collapse;
  text-align : left;
  margin : 0;
  height : inherit;
  min-height : 400px;
  padding : 0;
  width : 100%; }

td {
  height : auto;
  vertical-align : middle !important; 
  width : 100%;
  text-align : center; }

div#leftcol {
  background-color : #ffb6c1;
  clear : left;
  float : left;
  height : auto;
  min-height : 400px;
  width : 25%; }

div#rightcol {
  background-color : #ffb6c1;
  clear : right;
  float : right;
  height : auto;
  min-height : 400px;
  width : 25%; }

div#page {
  background-color : #ffb6c1;
  clear : none;
  float : left;
  height : auto;
  min-height : 400px;
  width : 50%; }

div#main {
  background-color : transparent;
  height : inherit;
  margin : 0 auto;
  clear : both;
  width : 100%; }

div#content {
  background-color : transparent;
  clear : both;
  float : left;
  height : inherit;
  width : 100%; }

div.tube {
  border : 2px solid #ffc0cb;
  background-color : #f0f0f0;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden; }

/* ]]> */
</style>
</head>
<body>
<div id="main">
<div id="content">
<div class="tube">
<div id="header"><table id="crossfader" frame="void" rules="none" summary="3 columed layout sample">
<tr><td><div id="box"><h1>HEADER</h1></div></td></tr>
</table>
</div> <!-- #header -->
<div id="leftcol"><table id="crossfader" frame="void" rules="none" summary="3 columed layout sample">
<tr><td><div id="box"><h1>LEFT</h1></div></td></tr>
</table></div> <!-- #leftcol -->
<div id="page"><table id="crossfader" frame="void" rules="none" summary="3 columed layout sample">
<tr><td><div id="box"><h1>CENTER</h1></div></td></tr>
</table></div> <!-- #page -->
<div id="rightcol"><table id="crossfader" frame="void" rules="none" summary="3 columed layout sample">
<tr><td><div id="box"><h1>RIGHT</h1></div></td></tr>
</table></div> <!-- #rightcol -->

</div> <!-- tube -->
</div> <!-- #content -->
</div> <!-- #main -->
</body>
</html>

if you still need more info about inserting contents to these layer without using any table, just let me know...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.