Help With Css Columns - Going from 3 to 2?

  • lplplpx3
  • Novice
  • Novice
  • lplplpx3
  • Posts: 23

Post 3+ Months Ago

Please look at: 'www dot lorrainephillips dot com' or see attachment. What do I need to do to change this a from a 3-column page layout to 2-column? I just want to change one of the pages in the site to 2-column and have tried everything but nothing gets rid of the 2 separator lines down the center of the page. I would like to get rid of right column and have the center column spread over to that right edge so there'll be only 1 separator on the page (next to the newsletter box). Thanks.

Heres the CSS:
CSS Code: [ Select ]
* {
   margin: 0px;
   padding: 0px;
}
body {
   background-image: url(../images/Page_Back.png);
   background-color: #ca6223;
   background-repeat: repeat-x;
   text-align: center;
}
.maintxt {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-style: normal;
   line-height: 15px;
   color: #000000;
}
.maintxt_bold {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-style: normal;
   line-height: 15px;
   color: #000000;
   font-weight: bold;
}
.maintxt_bold2 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 13px;
   font-style: normal;
   line-height: 15px;
   color: #000000;
   font-weight: bold;
}
.maintxt_italic {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-style: italic;
   line-height: 15px;
   color: #000000;
}
a img {
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
}
#wrapper {
   background-color: #FFF;
   width: 794px;
   margin-right: auto;
   margin-left: auto;
   text-align: left;
   border-style: solid;
   border-color: #1b1040;
   border-width: 1px;
}
#wrapper #white_top {
   background-color: #FFF;
   height: 15px;
}
#wrapper #logo {
   background-color: #FFF;
}
#wrapper #header {
   background-position: center center;
   background-image: url(../images/Banner.png);
   background-repeat: no-repeat;
   background-color: #FFF;
   text-align: center;
   vertical-align: baseline;
   margin: 0px;
   padding: 0px;
}
#wrapper #menu {
   background-image: url(../images/Menu_Bar_Back.jpg);
   background-repeat: no-repeat;
   margin-right: auto;
   margin-left: auto;
   height: 35px;
   width: 790px;
   padding: 0px;
}
#container {
width: 98%;
margin: 5px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#leftnav {
float: left;
width: 130px;
margin: 0;
margin-top: 0px;
padding-right: 15px;
padding-left: 0px;
}
#rightnav {
float: right;
width: 140px;
margin: 0;
margin-top: 5px;
padding-right: 15px;
padding-left: 0px;
}
#content {
margin-left: 160px;
border-left: 1px solid gray;
margin-right: 160px;
border-right: 1px solid gray;
padding: 1em;
}
#wrapper #main #footer {
   height: 16px;
   clear: both;
   margin: 0px;
   padding: 0px;
}
#wrapper #main #bottom1 {
   height: 30px;
   margin: 0px;
   padding: 0px;
}
#bottom2 {
   background-color: #ca6223;
   height: 20px;
}
.indentmenu{
   width: 100%; /*leave this value as is in most cases*/
   overflow: hidden;
   margin-right: auto;
   margin-left: auto;
   font-family: Arial;
   font-size: 12px;
   text-align: center;
   }
 
.indentmenu ul{
   margin: 0;
   float: right;
   width: 100%; /*width of menu*/
   padding-top: 7px;
   padding-right: 0;
   padding-bottom: 0;
   padding-left: 0;
}
 
.indentmenu ul li{
display: inline;
}
 
.indentmenu ul li a{
   float: inherit;
   color: #8781bd; /*text color*/
   padding: 1px 12px;
   text-decoration: none;
   
}
.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white; !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
}
 
.menu_spacing {
   font-family: Arial;
   font-size: 12px;
   text-align: center;
   line-height: normal;
   margin-left: 20px;
   margin-right: 20px;
}
.news_back_old {
   background-image: url(../images/News_2.png);
   width: 152px;
   height: 122px;
   background-repeat: no-repeat;
}
.news_back {
   background-image: url(../images/Newsletter.png);
   width: 148px;
   height: 276px;
   background-repeat: no-repeat;
}
img.floatLeft {
    float: left;
    margin: 4px;
}
  1. * {
  2.    margin: 0px;
  3.    padding: 0px;
  4. }
  5. body {
  6.    background-image: url(../images/Page_Back.png);
  7.    background-color: #ca6223;
  8.    background-repeat: repeat-x;
  9.    text-align: center;
  10. }
  11. .maintxt {
  12.    font-family: Verdana, Arial, Helvetica, sans-serif;
  13.    font-size: 11px;
  14.    font-style: normal;
  15.    line-height: 15px;
  16.    color: #000000;
  17. }
  18. .maintxt_bold {
  19.    font-family: Verdana, Arial, Helvetica, sans-serif;
  20.    font-size: 11px;
  21.    font-style: normal;
  22.    line-height: 15px;
  23.    color: #000000;
  24.    font-weight: bold;
  25. }
  26. .maintxt_bold2 {
  27.    font-family: Verdana, Arial, Helvetica, sans-serif;
  28.    font-size: 13px;
  29.    font-style: normal;
  30.    line-height: 15px;
  31.    color: #000000;
  32.    font-weight: bold;
  33. }
  34. .maintxt_italic {
  35.    font-family: Verdana, Arial, Helvetica, sans-serif;
  36.    font-size: 11px;
  37.    font-style: italic;
  38.    line-height: 15px;
  39.    color: #000000;
  40. }
  41. a img {
  42.    border-top-style: none;
  43.    border-right-style: none;
  44.    border-bottom-style: none;
  45.    border-left-style: none;
  46. }
  47. #wrapper {
  48.    background-color: #FFF;
  49.    width: 794px;
  50.    margin-right: auto;
  51.    margin-left: auto;
  52.    text-align: left;
  53.    border-style: solid;
  54.    border-color: #1b1040;
  55.    border-width: 1px;
  56. }
  57. #wrapper #white_top {
  58.    background-color: #FFF;
  59.    height: 15px;
  60. }
  61. #wrapper #logo {
  62.    background-color: #FFF;
  63. }
  64. #wrapper #header {
  65.    background-position: center center;
  66.    background-image: url(../images/Banner.png);
  67.    background-repeat: no-repeat;
  68.    background-color: #FFF;
  69.    text-align: center;
  70.    vertical-align: baseline;
  71.    margin: 0px;
  72.    padding: 0px;
  73. }
  74. #wrapper #menu {
  75.    background-image: url(../images/Menu_Bar_Back.jpg);
  76.    background-repeat: no-repeat;
  77.    margin-right: auto;
  78.    margin-left: auto;
  79.    height: 35px;
  80.    width: 790px;
  81.    padding: 0px;
  82. }
  83. #container {
  84. width: 98%;
  85. margin: 5px auto;
  86. background-color: #fff;
  87. color: #333;
  88. border: 1px solid gray;
  89. line-height: 130%;
  90. }
  91. #leftnav {
  92. float: left;
  93. width: 130px;
  94. margin: 0;
  95. margin-top: 0px;
  96. padding-right: 15px;
  97. padding-left: 0px;
  98. }
  99. #rightnav {
  100. float: right;
  101. width: 140px;
  102. margin: 0;
  103. margin-top: 5px;
  104. padding-right: 15px;
  105. padding-left: 0px;
  106. }
  107. #content {
  108. margin-left: 160px;
  109. border-left: 1px solid gray;
  110. margin-right: 160px;
  111. border-right: 1px solid gray;
  112. padding: 1em;
  113. }
  114. #wrapper #main #footer {
  115.    height: 16px;
  116.    clear: both;
  117.    margin: 0px;
  118.    padding: 0px;
  119. }
  120. #wrapper #main #bottom1 {
  121.    height: 30px;
  122.    margin: 0px;
  123.    padding: 0px;
  124. }
  125. #bottom2 {
  126.    background-color: #ca6223;
  127.    height: 20px;
  128. }
  129. .indentmenu{
  130.    width: 100%; /*leave this value as is in most cases*/
  131.    overflow: hidden;
  132.    margin-right: auto;
  133.    margin-left: auto;
  134.    font-family: Arial;
  135.    font-size: 12px;
  136.    text-align: center;
  137.    }
  138.  
  139. .indentmenu ul{
  140.    margin: 0;
  141.    float: right;
  142.    width: 100%; /*width of menu*/
  143.    padding-top: 7px;
  144.    padding-right: 0;
  145.    padding-bottom: 0;
  146.    padding-left: 0;
  147. }
  148.  
  149. .indentmenu ul li{
  150. display: inline;
  151. }
  152.  
  153. .indentmenu ul li a{
  154.    float: inherit;
  155.    color: #8781bd; /*text color*/
  156.    padding: 1px 12px;
  157.    text-decoration: none;
  158.    
  159. }
  160. .indentmenu ul li a:hover, .indentmenu ul li .current{
  161. color: white; !important; /*text color of selected and active item*/
  162. padding-top: 6px; /*shift text down 1px for selected and active item*/
  163. padding-bottom: 4px; /*shift text down 1px for selected and active item*/
  164. }
  165.  
  166. .menu_spacing {
  167.    font-family: Arial;
  168.    font-size: 12px;
  169.    text-align: center;
  170.    line-height: normal;
  171.    margin-left: 20px;
  172.    margin-right: 20px;
  173. }
  174. .news_back_old {
  175.    background-image: url(../images/News_2.png);
  176.    width: 152px;
  177.    height: 122px;
  178.    background-repeat: no-repeat;
  179. }
  180. .news_back {
  181.    background-image: url(../images/Newsletter.png);
  182.    width: 148px;
  183.    height: 276px;
  184.    background-repeat: no-repeat;
  185. }
  186. img.floatLeft {
  187.     float: left;
  188.     margin: 4px;
  189. }
Attachments:
Picture.png
Moderator Remark: added [code/] tags
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • CA-SA
  • Busy Student
  • Proficient
  • User avatar
  • Posts: 272
  • Loc: Under the giant stack of papers

Post 3+ Months Ago

If you just want to remove the right border line of the middle column, removing border-right from the content ID in your CSS should do the trick.

The ID would end up looking like this:
CSS Code: [ Select ]
#content {
    margin-left: 160px;
    border-left: 1px solid gray;
    margin-right: 160px;
    padding: 1em;
}
  1. #content {
  2.     margin-left: 160px;
  3.     border-left: 1px solid gray;
  4.     margin-right: 160px;
  5.     padding: 1em;
  6. }
  • lplplpx3
  • Novice
  • Novice
  • lplplpx3
  • Posts: 23

Post 3+ Months Ago

Got you. Thanks very much.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 64 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.