Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/11/2009, 15:04
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años
Puntos: 20
Ayuda moldeando diseño hibrido

Buenas,

Estoy intentando moldear un diseño híbrido, pero no consigo arreglármelas para conseguir lo siguiente:

Son 3 columnas, izq y derecha son de tamaño fijo y lo que es liquido es la parte central, a la que le he dado un min-width:500px; para que no se haga extremadamente pequeña.

El problema que estoy teniendo es que cuando encojo la pantalla horizontalmente, la columna derecha sobrepasa tanto la columna central como la izquierda. Me gustaría limitar esto, y que si se encoge la ventana hasta el minimo de la zona central 500px, la columna derecha no se sobrepusiera por encima de estas capas.

¿Sabéis que modificaciones debo realizar?

Muchas gracias de antemano!

Dejo el código que estoy utilizando:

Código css:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <title>Dynamic Drive: CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)</title>
  7. <style type="text/css">
  8.  
  9. body{
  10. margin:0;
  11. padding:0;
  12. line-height: 1.5em;
  13. }
  14.  
  15. b{font-size: 110%;}
  16. em{color: red;}
  17.  
  18. #topsection{
  19. background: #EAEAEA;
  20. height: 90px; /*Height of top section*/
  21. }
  22.  
  23. #topsection h1{
  24. margin: 0;
  25. padding-top: 15px;
  26. }
  27.  
  28. #contentwrapper{
  29. float: left;
  30. width: 100%;
  31. }
  32.  
  33. #contentcolumn{
  34. margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
  35. min-width:500px;
  36. }
  37.  
  38. #leftcolumn{
  39. float: left;
  40. width: 230px; /*Width of left column*/
  41. margin-left: -100%;
  42. background: #C8FC98;
  43. }
  44.  
  45. #rightcolumn{
  46. float: left;
  47. width: 200px; /*Width of right column*/
  48. margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
  49. background: #FDE95E;
  50. }
  51.  
  52. #footer{
  53. clear: left;
  54. width: 100%;
  55. background: black;
  56. color: #FFF;
  57. text-align: center;
  58. padding: 4px 0;
  59. }
  60.  
  61. #footer a{
  62. color: #FFFF80;
  63. }
  64.  
  65. .innertube{
  66. margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
  67. margin-top: 0;
  68. }
  69.  
  70. </style>
  71.  
  72. <script type="text/javascript">
  73. /*** Temporary text filler function. Remove when deploying template. ***/
  74. var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
  75. function filltext(words){
  76. for (var i=0; i<words; i++)
  77. document.write(gibberish[Math.floor(Math.random()*3)]+" ")
  78. }
  79. </script>
  80.  
  81. </head>
  82. <body>
  83. <div id="maincontainer">
  84.  
  85. <div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)</h1></div></div>
  86.  
  87. <div id="contentwrapper">
  88. <div id="contentcolumn">
  89. <div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
  90. </div>
  91. </div>
  92.  
  93. <div id="leftcolumn">
  94. <div class="innertube"><b>Left Column: <em>230px</em></b> <script type="text/javascript">filltext(20)</script></div>
  95.  
  96. </div>
  97.  
  98. <div id="rightcolumn">
  99. <div class="innertube"><b>Right Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>
  100. </div>
  101.  
  102. <div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>
  103.  
  104. </div>
  105. </body>
  106. </html>