HTML and CSS RSS HTML and CSS RSS

Problems after converting 2 column layout to 3 column layout

Reply

•
•
Join Date: Jan 2009
Posts: 33
Reputation: arvindikchari is an unknown quantity at this point 
Solved Threads: 0
arvindikchari arvindikchari is offline Offline
Light Poster

Problems after converting 2 column layout to 3 column layout

 
0
  #1
Jun 2nd, 2009
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'
HTML and CSS Syntax (Toggle Plain Text) 
  1. Structure:
  2.         display | position | float | overflow | width | height | border | margin | padding | background | align | font
  3. */
  4.  
  5. * {min-height:1px;}
  6. 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;}
  7.  
  8. a {color:#7f000b;}
  9. a:hover {color:#ff2740;}
  10.  
  11. p {border:0; margin:15px 0; padding:0;}
  12.  
  13. div {display:block; border:0; margin:0; padding:0;}
  14.  
  15. h1, h2, h3, h4, h5 {border:0; margin:15px 0 10px 0; padding:0; font-weight:bold;}
  16. h1 {font-size:260%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
  17. h2 {font-size:180%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
  18. h3 {font-size:120%; line-height:100%; font-weight:bold;}
  19. h4 {font-size:120%;}
  20. h5 {font-size:100%;}
  21.  
  22. table {display:table; border-collapse:collapse; margin:15px 0; padding:0; border:1px solid #ffaec0; font-size:100%;}
  23. tr {display:table-row;}
  24. th, td {display: table-cell; border:1px solid #ffaec0; margin:0; padding:5px; vertical-align:top; text-align:left;}
  25. th {background:#ffe5e9; text-align:center; color:#7f000b; font-weight:bold;}
  26.  
  27. ul, ol {display:block; border:0; margin:15px 0 15px 40px; padding:0;}
  28. ol {list-style-type:decimal;}
  29. li {display:list-item; border:0; margin:0; padding:0; _height:1px;}
  30. ul ul, ul ol, ol ol, ol ul {margin: 0 0 0 20px;}
  31.  
  32. dl {border:0; margin:15px 0; padding:0;}
  33. dt {border:0; margin:0; padding:0; font-weight:bold;}
  34. dd {border:0; margin:0 0 0 30px; padding:0;}
  35.  
  36. form {border:0; margin:0; padding:0;}
  37. fieldset {border:1px solid #ccc; margin:15px 0; padding:10px;}
  38. legend {margin-left:10px; font-size:100%; font-weight:bold; color:#008;}
  39.  
  40. hr {display:block; height:1px; margin:10px 0; padding:0; background:#CCC; border:0 solid #CCC; color:#CCC;}
  41.  
  42. a, img, span {border:0; margin:0; padding:0;}
  43. abbr, acronym {border-bottom:1px dotted #CCC; cursor:help;}
  44.  
  45. del, .through {text-decoration:line-through;}
  46. strong, .strong {font-weight:bold;}
  47. cite, em, q, var {font-style:italic;}
  48. code, kbd, samp {font-family:monospace; font-size:110%;}
  49.  
  50. /* Floating */
  51. .f-left {float:left;}
  52. .f-right {float:right;}
  53.  
  54. /* Text align */
  55. .t-left {text-align:left;}
  56. .t-center {text-align:center;}
  57. .t-right {text-align:right;}
  58.  
  59. .va-middle {vertical-align:middle;}
  60.  
  61. .clear {clear:both;}
  62. .box {min-height:1px; _height:1px;}
  63. .box:after {content:"."; display:block; line-height:0px; font-size:0px; visibility:hidden; clear:both;}
  64.  
  65. .nom {margin:0;}
  66. .noscreen {display:none;}
  67.  
  68. /* -----------------...........--------------------------------------------------------------------------------------- */
  69.  
  70. #main {width:1020px; margin:50px auto 0 auto; _text-align:left;}
  71.  
  72. /* Header */
  73. #header {position:relative; width:770px; height:100px; margin:0; padding:0; background:#233C9B url("../design/header.jpg") 0 0 no-repeat; color:#FFF;}
  74.  
  75.     /* Header - logo */
  76.     #header #logo {position:absolute; top:35px; left:35px; margin:0;}
  77.  
  78.     #header #logo a {color:#FFF;}
  79.     #header #logo a:hover {color:#ff99b2; text-decoration:underline;}
  80.  
  81.     /* Header - Search */
  82.     #header #search {position:absolute; top:35px; right:20px;}
  83.     #header #search form {position:relative;}
  84.     #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;}
  85.     #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;}
  86.     #header #search #search-submit {position:absolute; top:0; right:0px;}
  87.     #header #search fieldset {margin:0; padding:0; border:0;}
  88.     #header #search fieldset {width:200px;}
  89.     #header #search legend {display:none;}
  90.  
  91. /* Main menu (tabs) */
  92. #tabs {background:#7f000b; margin:0 5px; padding:10px 0 0 0; _height:1px;}
  93.  
  94.     #tabs ul {margin:0 10px; padding:0; list-style:none;}
  95.     #tabs ul li {margin:0 5px 0 0; padding:0; float:left;}
  96.     #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;}
  97.  
  98.     /* Main menu (tabs - link) */
  99.     #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;}
  100.     #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;}
  101.  
  102.     /* Main menu (tabs - hover) */
  103.     #tabs ul li a:hover {background:url("../design/tab_hover.gif") 0 0 repeat-x; color:#FFF;}
  104.     #tabs ul li a:hover span.tab-l {background:url("../design/tab_hover_l.gif") 0 0 no-repeat;}
  105.     #tabs ul li a:hover span.tab-r {background:url("../design/tab_hover_r.gif") 100% 0 no-repeat;}
  106.  
  107.     /* Main menu (tabs - active) */
  108.     #tabs ul li#active a {background:#FFF; color:#FF0000;}
  109.     #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;}
  110.     #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;}
  111.  
  112. /* Page (2 columns) */
  113. #page {width:990px; min-height:1px; background:#FFF url("../design/bg_page.gif") 0 0 repeat-y; _height:1px;}
  114. #page-in {min-height:1px; padding:10px 0; background:url("../design/bg_page_in.jpg") 0 0 no-repeat; _height:1px;}
  115.  
  116. /* Strip */
  117. #strip {position:relative; clear:both; padding:3px 20px 10px 20px; color:#ff335e;}
  118. #strip p {margin:0;}
  119. #strip a {color:#ff335e;}
  120. #strip a:hover {color:#7f000b;}
  121.  
  122.     /* Strip - breadcrumbs */
  123.     #strip #breadcrumbs {width:520px; margin:0; padding:0;}
  124.  
  125.     /* Strip - RSS */
  126.     #strip #rss {float:right; width:175px; _width:200px; margin:0; padding-left:25px; background:url("../design/ico_rss.gif") 0 50% no-repeat}
  127.  
  128.  
  129. /* left column is 'coll', right column is 'col' */
  130. #coll {float:left; width:240px; margin:0; padding:0; background:#ffc8d4 url("../design/col_bg.jpg") 0 0 repeat-y;}
  131. #coll-in {padding:20px 10px; background:url("../design/col_top.jpg") 0 0 no-repeat;}
  132. #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;}
  133.  
  134.     /* left column - About me */
  135.     #coll #about-me {margin-bottom:15px; line-height:130%;}
  136.     #coll #about-me p {margin:0;}
  137.     #coll #about-me #me {float:left; width:54px; height:58px; margin-right:7px;}
  138.  
  139.     /* left column - Category */
  140.     #coll ul#category {margin:15px 0; padding:0; list-style:none;}
  141.     #coll ul#category li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
  142.     #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;}
  143.     #coll ul#category li a:hover {background-color:#ffccd8; color:#7f000b;}
  144.     #coll ul#category li#category-active a {background:#ffdbe3 url("../design/ico_archive2.gif") 5px 50% no-repeat; font-weight:bold;}
  145.  
  146.     /* left column - Archive */
  147.     #coll ul#archive {margin:15px 0; padding:0; list-style:none;}
  148.     #coll ul#archive li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
  149.     #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;}
  150.     #coll ul#archive li a:hover {background-color:#ffccd8; color:#7f000b;}
  151.     #coll ul#archive li#archive-active a {background:#ffdbe3 url("../design/ico_archive2.gif") 5px 6px no-repeat; font-weight:bold;}
  152.  
  153.     /* left column - Links */
  154.     #coll ul#links {margin:15px 0; padding:0; list-style:none;}
  155.     #coll ul#links li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
  156.     #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;}
  157.     #coll ul#links li a:hover {background-color:#ffccd8; color:#7f000b;}
  158.  
  159.  
  160.  
  161.  
  162.  
  163. /* Content */
  164. #content {float:left; width:530px; _width:550px; margin:0; padding:0 0 0 20px;}
  165.  
  166.     /* Content - article */
  167.     #content .article {clear:both; margin:0; padding:20px; background:url("../design/content_article_bg.jpg") 0 0 no-repeat;}
  168.     #content .article h2 {margin:0 -20px; padding:10px; background:#ffdce1 url("../design/content_title_bg.gif") 0 0 repeat-y; color:#7f000b;}
  169.     #content .article h2 span {background:url("../design/ico_list.gif") 0 50% no-repeat; padding-left:25px;}
  170.  
  171.     #content .article p {text-align:justify;}
  172.     #content .info {margin:10px 0; padding-bottom:8px; border-bottom:1px solid #ffdce1; color:#ff3360;}
  173.     #content .info a {color:#ff3360;}
  174.     #content .info a:hover {color:#FF0000;}
  175.  
  176.     #content .info span.date, #content .info span.cat, #content .info span.user, #content .info span.comments {padding-left:15px;}
  177.     #content .info span.date {background:url("../design/ico_date.gif") 0 50% no-repeat;}
  178.     #content .info span.cat {background:url("../design/ico_cat.gif") 0 50% no-repeat; margin-left:8px;}
  179.     #content .info span.user {background:url("../design/ico_user.gif") 0 50% no-repeat; margin-left:8px;}
  180.     #content .info span.comments {background:url("../design/ico_comments.gif") 0 50% no-repeat; margin-left:8px;}
  181.  
  182.     /* Content - More */
  183.     #content .btn-more {margin:0 0 15px 0; padding:0; border:0; position:relative;}
  184.     #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;}
  185.     #content .btn-more a:hover {background:url("../design/btn_more.gif") -95px 0 no-repeat;}
  186.  
  187. /* Right column: left column is 'coll', right column is 'col' */
  188. #col {float:right; width:200px; margin:0; padding:0; background:#ffc8d4 url("../design/col_bg.gif") 0 0 repeat-y;}
  189. #col-in {padding:20px 10px; background:url("../design/col_top.gif") 0 0 no-repeat;}
  190. #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;}
  191.  
  192.     /* Right column - About me */
  193.     #col #about-me {margin-bottom:15px; line-height:130%;}
  194.     #col #about-me p {margin:0;}
  195.     #col #about-me #me {float:left; width:54px; height:58px; margin-right:7px;}
  196.  
  197.     /* Right column - Category */
  198.     #col ul#category {margin:15px 0; padding:0; list-style:none;}
  199.     #col ul#category li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
  200.     #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;}
  201.     #col ul#category li a:hover {background-color:#ffccd8; color:#7f000b;}
  202.     #col ul#category li#category-active a {background:#ffdbe3 url("../design/ico_archive2.gif") 5px 50% no-repeat; font-weight:bold;}
  203.  
  204.     /* Right column - Archive */
  205.     #col ul#archive {margin:15px 0; padding:0; list-style:none;}
  206.     #col ul#archive li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
  207.     #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;}
  208.     #col ul#archive li a:hover {background-color:#ffccd8; color:#7f000b;}
  209.     #col ul#archive li#archive-active a {background:#ffdbe3 url("../design/ico_archive2.gif") 5px 6px no-repeat; font-weight:bold;}
  210.  
  211.     /* Right column - Links */
  212.     #col ul#links {margin:15px 0; padding:0; list-style:none;}
  213.     #col ul#links li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
  214.     #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;}
  215.     #col ul#links li a:hover {background-color:#ffccd8; color:#7f000b;}
  216.  
  217. /* Footer */
  218. #footer {position:relative; clear:both; width:770px; height:60px; margin-bottom:50px; background:url("../design/footer.jpg") 0 0 no-repeat; color:#ff3360;}
  219. #footer a {color:#ff3360;}
  220. #footer a:hover {color:#7f000b;}
  221.  
  222.     /* Footer - "back on top" */
  223.     #top {position:absolute; top:55px; left:550px;}
  224.     #top p {position:relative; width:30px; height:25px; margin:0; overflow:hidden;}
  225.     #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;}
  226.     #top a:hover span {background:url("../design/ico_top.gif") -30px 0 no-repeat;}
  227.  
  228.     /*  Footer - copyright */
  229.     #footer p#copyright {position:absolute; top:10px; left:40px; margin:0;}
  230.  
  231.     /* Footer - created by */
  232.     #createdby {position:absolute; top:10px; left:562px; margin:0; color:#ff6587;}
  233.     #createdby a {color:#ff6587;}
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Problems after converting 2 column layout to 3 column layout

 
0
  #2
Jun 2nd, 2009
You'll need to set it right floated, instead of having it floated on the left.
e.g.
HTML and CSS Syntax (Toggle Plain Text) 
  1. #col {
  2.    float : right;
  3.    clear : right;
  4.   /* your next rule */
  5.    }
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 33
Reputation: arvindikchari is an unknown quantity at this point 
Solved Threads: 0
arvindikchari arvindikchari is offline Offline
Light Poster

Re: Problems after converting 2 column layout to 3 column layout

 
0
  #3
Jun 2nd, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Problems after converting 2 column layout to 3 column layout

 
0
  #4
Jun 2nd, 2009
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.

HTML and CSS Syntax (Toggle Plain Text) 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tansitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Style-Type" content="text/css" />
  9. <title>3 Column floated Layers Sample</title>
  10. <style type="text/css">
  11. /* <![CDATA[ */
  12. html, body {
  13.   background-color : #fff;  
  14.   color : #fff;
  15.   font : normal normal normal 90%/1.6 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  16.   margin : 0;
  17.   padding : 0;
  18.   min-width : 800px;
  19.   min-height : 600px;
  20.   text-align : center;
  21.   height : auto;
  22.   width : auto; }
  23.  
  24. div {
  25.   border : none;
  26.   margin : 0;
  27.   padding : 0;
  28.   }
  29.  
  30. div#header {
  31.   background-color : #ffb6c1;
  32.   clear : both;
  33.   float : left;
  34.   height : auto;
  35.   min-height : 200px;
  36.   max-height : 200px;
  37.   width : 100%; } div#header table { min-height : 200px; max-height : 200px; }
  38.  
  39. div#box {
  40.   text-align : center;
  41.   margin : 0 auto;
  42.   width : 50%; }
  43.  
  44. h1 { margin : 0 auto; padding : 0; font-size : 180%; }
  45.  
  46. table {
  47.   border-collapse : collapse;
  48.   text-align : left;
  49.   margin : 0;
  50.   height : inherit;
  51.   min-height : 400px;
  52.   padding : 0;
  53.   width : 100%; }
  54.  
  55. td {
  56.   height : auto;
  57.   vertical-align : middle !important; 
  58.   width : 100%;
  59.   text-align : center; }
  60.  
  61. div#leftcol {
  62.   background-color : #ffb6c1;
  63.   clear : left;
  64.   float : left;
  65.   height : auto;
  66.   min-height : 400px;
  67.   width : 25%; }
  68.  
  69. div#rightcol {
  70.   background-color : #ffb6c1;
  71.   clear : right;
  72.   float : right;
  73.   height : auto;
  74.   min-height : 400px;
  75.   width : 25%; }
  76.  
  77. div#page {
  78.   background-color : #ffb6c1;
  79.   clear : none;
  80.   float : left;
  81.   height : auto;
  82.   min-height : 400px;
  83.   width : 50%; }
  84.  
  85. div#main {
  86.   background-color : transparent;
  87.   height : inherit;
  88.   margin : 0 auto;
  89.   clear : both;
  90.   width : 100%; }
  91.  
  92. div#content {
  93.   background-color : transparent;
  94.   clear : both;
  95.   float : left;
  96.   height : inherit;
  97.   width : 100%; }
  98.  
  99. div.tube {
  100.   border : 2px solid #ffc0cb;
  101.   background-color : #f0f0f0;
  102.   height : inherit !important;
  103.   clear : both;
  104.   padding : 1em;
  105.   margin : 0;
  106.   overflow : hidden; }
  107.  
  108. /* ]]> */
  109. </style>
  110. </head>
  111. <body>
  112. <div id="main">
  113. <div id="content">
  114. <div class="tube">
  115. <div id="header"><table id="crossfader" frame="void" rules="none" summary="3 columed layout sample">
  116. <tr><td><div id="box"><h1>HEADER</h1></div></td></tr>
  117. </table>
  118. </div> <!-- #header -->
  119. <div id="leftcol"><table id="crossfader" frame="void" rules="none" summary="3 columed layout sample">
  120. <tr><td><div id="box"><h1>LEFT</h1></div></td></tr>
  121. </table></div> <!-- #leftcol -->
  122. <div id="page"><table id="crossfader" frame="void" rules="none" summary="3 columed layout sample">
  123. <tr><td><div id="box"><h1>CENTER</h1></div></td></tr>
  124. </table></div> <!-- #page -->
  125. <div id="rightcol"><table id="crossfader" frame="void" rules="none" summary="3 columed layout sample">
  126. <tr><td><div id="box"><h1>RIGHT</h1></div></td></tr>
  127. </table></div> <!-- #rightcol -->
  128.  
  129. </div> <!-- tube -->
  130. </div> <!-- #content -->
  131. </div> <!-- #main -->
  132. </body>
  133. </html>

if you still need more info about inserting contents to these layer without using any table, just let me know...
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC