Tema: Como hacer para que una columna se pegue a otra, y no que pase por debajo.
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 12/02/2010, 14:42
Edmidimar
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: Como hacer para que una columna se pegue a otra, y no que pase por debajo.
hhaaa se me olvidaba, la estructura completo, y sacando aquellos que no tienen nada que ver, seria este:

Esta original, solo se a cambiado algunas cosas que nada tiene que ver con el ancho de las columnas:

Código CSS: 
Ver original
  1. /* global layout */
  2. #page {
  3.     border-left: solid 4px #bdc2c9;
  4.     border-right: solid 4px #bdc2c9;
  5.     background-color: #faf7f0; 
  6.     width: 1010px;
  7.     margin: 0 auto 2px auto;
  8.     text-align:left;
  9.  
  10. }
  11. #page h1 {
  12.     text-align:center;
  13.     
  14. }
  15. h1#logo {
  16.     width: 100%;
  17.     margin-top: 0;
  18.     margin-left: 0px;
  19. }
  20. #header {
  21.     float: right;
  22.     width: 75%;
  23.     text-align: right;
  24.     margin-top: -300px;
  25.     margin-right: 0;
  26. }
  27. #left_column {
  28.     float:left;
  29.     clear:left;
  30.     width:190px;
  31.     padding-right: 10px;
  32.     margin-left: 5px;
  33. }
  34. #center_column {
  35.     float: left;
  36.     width: 600px;
  37.     margin: -35px 0 0 0;
  38.     
  39. }
  40. #right_column {
  41.     float:right;
  42.     width: 190px;
  43.     padding-left: 10px;
  44.     margin-right: 5px;
  45. }
  46.  
  47.  
  48. /* /global RTE fields */
  49.  
  50. /* global table style */
  51. div.table_block {
  52.     background: transparent url('../img/table_footer.gif') no-repeat bottom left;
  53.     padding-bottom:6px;
  54.     margin:0 auto 2em;
  55.     width:601px;
  56. }
  57. table.std {
  58.     border-spacing: 0;
  59.     border-collapse: collapse;
  60.     width:100%;
  61. }
  62. table.std td, table.std th {
  63.     padding: 0.6em 0.43em;
  64. }
  65. table.std th {
  66.     white-space:nowrap;
  67. }
  68. table.std tr.item td, table.std tr.item th {
  69.     background-color: white;
  70. }
  71. table.std tr.alternate_item td, table.std tr.alternate_item th {
  72.     background-color: #f1f2f4;
  73. }
  74. table.std tbody tr td, table.std tfoot tr td {
  75. border-color:#BDC2C9;
  76. border-right: medium;
  77.     border-top: 1px solid #bdc2c9;
  78. }
  79. table.std thead th {
  80.     background-color: transparent;
  81.     background-image: url('../img/table_header.gif');
  82.     background-repeat: no-repeat;
  83.     height:24px;
  84.     color: #374853;
  85.     font-weight: bold;
  86.     text-align: center;
  87.     white-space: nowrap;
  88. }
  89. table.std thead th.first_item {
  90.     background-position: top left;
  91. }
  92. table.std thead th.last_item {
  93.     background-position: top right;
  94. }
  95. table.std thead th.item {
  96.     background-position: -5px 0;
  97. }
  98. table.std tfoot td {
  99.     color: #374853;
  100.     text-align: right;
  101.     white-space: nowrap;
  102. }
  103. /* /global table style */
  104.  
  105. /* global form style */
  106. form.std {
  107.     clear: both;
  108. }
  109. form.std h3 {
  110.     color: #555;
  111.     font-size: 1.4em;
  112.     font-weight: normal;
  113.     border-bottom: 1px solid #d0d1d5;
  114.     padding: 0.5em;
  115.     margin: 0 0 0.5em 0;
  116. }
  117. form.std fieldset {
  118.     border: 1px solid #d0d3d8;
  119.     background: #D0D1D5 url('../img/form_bg.jpg') repeat-x top left;
  120.     margin-bottom: 1em;
  121.     padding-bottom: 1em;
  122. }
  123. form.std fieldset legend {
  124.     padding: 0.3em 0.6em;
  125.     margin: 1em 0 1em 0.5em;
  126.     font-size: 1.6em;
  127.     font-weight: 100;
  128.     border-color: #d0d1d5;
  129.     border-style: solid;
  130.     border-width: 1px;
  131. }
  132. form.std h4, form.std p {
  133.     padding: 0.3em 1em;
  134.     clear: both;
  135. }
  136. form.std label, form.std p span {
  137.     float: left;
  138.     text-align: right;
  139.     width: 30%;
  140. }
  141. form.std p span.like_input {
  142.     width: auto;
  143.     margin-left:0.7em;
  144. }
  145. input, textarea, select, span.editable {
  146.     margin-left: 0.7em;
  147.     font-size: 12px;
  148.     font-family: Verdana, Arial, Helvetica, Sans-Serif;
  149.     vertical-align: top;
  150.     outline: none;
  151. }
  152.  
  153. input, textarea, select {
  154.     border: 1px solid #bdc2c9;
  155. }
  156.  
  157. input.text {
  158.     height:18px;
  159.     padding-left:2px;
  160.     padding-right:2px;
  161. }
  162. .checkbox input, .radio input {
  163.     border: none;
  164. }
  165. form.std .checkbox label, form.std .radio label, form.std span.form_info {
  166.     margin: 0;
  167.     float: none;
  168.     text-align: left;
  169. }
  170. .required sup {
  171.     color: #da0f00;
  172. }
  173. form.std p.checkbox {
  174.     padding-left: 30%;
  175. }
  176. form.std p.submit {
  177.     padding-left:31%!important;
  178.     margin-bottom: 1.5em;
  179. }
  180.  
  181. #center_column form.std p.submit2 {
  182.     padding-left:170px;
  183.     margin-bottom: 1.5em;
  184. }
  185.  
  186.  
  187. /* Default block style */
  188. div.block {
  189.     margin-bottom: -0.0em;
  190.     width: 191px;
  191. }
  192. #left_column div.block, #right_column div.block {
  193.     padding-bottom: 6px;
  194.     background: transparent url('../img/block_footer.gif') no-repeat bottom left;
  195. }
  196. div.block h4 {
  197.     text-transform: uppercase;
  198.     font-family: Helvetica, Sans-Serif;
  199.     font-weight: bold;
  200.     font-size: 1.2em;
  201.     padding-left:0.5em;
  202.     border-bottom:1px solid #990000;
  203.     padding-top:0px;
  204.     line-height:5.7em;
  205.     color: #fefbe4;
  206.     height: 50px;
  207.     background: transparent url('../img/block_header.png') no-repeat top left;
  208. }
  209. div.block h4 a { color: #fefbe4; }
  210. div.block ul { list-style: none; }
  211. div.block ul.tree li { padding-left:1.2em; }
  212. div.block a:hover { text-decoration: underline; }
  213. #left_column div.block .block_content a.button_large, #right_column div.block .block_content a.button_large { margin:0 0 0 -3px; }
  214. div.block .block_content {
  215.     border-left: 1px #d0d3d8;
  216.     border-right: 1px #d0d3d8;
  217.     padding:0.5em 0.7em 0pt;
  218.     background-color: #e4e5e7;
  219.     min-height:20px;
  220. }
  221. div.block li {
  222.     padding: 0.2em 0 0.2em 0em;
  223.     list-style-position: outside;
  224. }
  225. div.block a {
  226.     color: #595a5e;
  227.     text-decoration: none;
  228. }
  229. /* block in the center column*/
  230. #center_column p { color: Highlight; margin: 0.1em 0; padding-left:0.7em;}
  231. #center_column div.block { width: 601px;}
  232. #center_column div.block h4 {
  233.     background: transparent url('../img/block_header_large.png') no-repeat top left;
  234.     height: 17px;
  235.     color: white;
  236. }
  237.  
  238. /* Special style for block products in center column */
  239. #center_column .products_block { border: none; }
  240. #center_column .products_block  { color: #595a5e; }
  241. #center_column .products_block h4 { line-height: 1.3em; }
  242. #center_column .products_block .block_content {
  243.     background: #d0d3d8 none;
  244.     padding:0pt;
  245. }
  246. #center_column .products_block ul li:hover {background-color: #bdc2c9; }
  247. #center_column .products_block ul li {
  248.     border-right: 1px solid white;
  249.     border-bottom:1px solid white;
  250.     float: left;
  251.     clear: none;
  252.     width: 149px; 
  253. /*  height:375px;*/
  254.  
  255.     background-color: #d0d3d8;
  256.     padding: 0;
  257.     margin-top:0;
  258. }
  259.  
  260. #center_column .products_block ul .product_accessories_description  {
  261.     margin:0;
  262.     padding:0;
  263. }
  264. #center_column .products_block ul .product_accessories_description .product_accessories_price{
  265.     margin-top:75px !important;
  266.     margin-top:0px;
  267. }
  268. #center_column .products_block ul .product_accessories_description {
  269.     margin:0;
  270.     padding:0;
  271.     height:280px;
  272. }
  273.  
  274. /*#center_column .products_block li.last_item { float:none; clear:both; */
  275. #center_column .products_block li.last_item_of_line { border-right:none; }
  276. #center_column .products_block li.first_item_of_line { width: 149px; clear:both; }
  277. #center_column .products_block li.last_line { border-bottom:none; }
  278. #center_column .products_block p, #center_column .products_block h5 { margin: 0.5em 0.1em; }
  279. #center_column div.products_block h5 {
  280.     display: block;
  281.     height: 2.57em;
  282. }
  283. #center_column div.products_block h5 a {
  284.     color: #374853;
  285.     font-size:1.1em;
  286. }
  287. #center_column div.products_block ul li p {
  288.     font-size:1.1em;
  289.     margin:0;
  290.     padding:0;
  291. }
  292. #center_column div.products_block p.product_desc {
  293.     height:8.5em;
  294.     color: #595a5e;
  295. }
  296. #center_column div.products_block a.product_image {
  297.     display: block;
  298.     background-color: transparent;
  299.     width: 129px;
  300.     height: 129px;
  301.     margin-left:10px;
  302. }
  303. #center_column div.products_block .product_accessories_description a.product_image {
  304.     width: 118px;
  305.     height: 85px;
  306. }
  307. #center_column div.products_block a.product_description {
  308.     display: block;
  309.     width: 118px;
  310.     height: 50px;
  311.     margin-left:2px;    
  312. }
  313.  
  314. #center_column div.products_block a.product_image img{
  315.     float:none;
  316.     margin:0;
  317. }
  318. #center_column div.products_block p.product_desc, #center_column div.products_block h5 {
  319.     margin-left:0.5em;
  320.     margin-right:0.5em;
  321. }
  322. #center_column div.products_block ul li p.product_desc a { font-weight:normal; }
  323. #center_column .products_block span.price {
  324.     text-align: center;
  325.     font-size: 1.2em;
  326.     padding: 0.5em 0;
  327.     /*display: block;*/
  328. }
  329. p.price_container {
  330.     text-align: center;
  331. }
  332. #center_column .products_block .featured_price { 
  333.     margin-top:2.5em;
  334. }
  335. #center_column .products_block a.button, #center_column .products_block a.exclusive, #center_column .products_block span.exclusive {
  336.     margin: 0.5em auto;
  337. }
  338.  
  339. /* Special style for block accessories in center column (product page) */
  340. #center_column .products_block.accessories_block .block_content{ background:none; }
  341. #center_column div.products_block.accessories_block p.product_desc { height:6.5em; }
  342. #center_column .products_block.accessories_block .block_content li{ background:none;  }
  343. #center_column .products_block.accessories_block .block_content li a.product_image, #center_column .products_block.accessories_block .block_content li a.product_description { border-right:1px solid #d0d3d8; font-weight:bolder; }
  344. #center_column .products_block.accessories_block .block_content li.last_item a.product_image{ border:none; }
  345.  
  346.  
  347. /* contact-form.tpl */
  348. body#contact-form div#center_column form input#email, body#contact-form div#center_column form select#id_contact, body#contact-form div#center_column form textarea#message{
  349.     width: 50%;
  350. }
  351.  
  352. form.std p.desc_contact span.like_input {
  353.     width: 366px;
  354.     text-align: left;
  355. }
  356.  
  357. /* conditions.tpl */
  358. #conditions #right_column { display: none; }
  359. #conditions h2 { background: transparent url('../img/title_bg_large.gif') no-repeat top left; }
  360. #conditions #center_column {
  361.     width: 730px;
  362.     text-align: justify;
  363. }
  364.  
  365. }

Yo se mas o menos algo de CSS, pero en este caso me considero novato.

Alguna sugerencia???