none
Divs paralelos auto adaptables en altura RRS feed

  • Pregunta

  • Hola Amigos,

    Estoy cambiando toda la estructura de mi MasterPage que estaba diseñada con tablas, pasando a Divs, para poder manejar todo el diseño de una forma mas simple desde CSS.

    El problema es termina siendo mas complicado de lo que pensaba!

    Tengo la siguiente estructura, ya que no encontraba otra manera de hacer esta esctructura de otra forma.

    <div id="ContenedorGeneral" >
    
         <div id="cabeceraFlash">
         </div>
    	
           <div id="cuerpo">
          
                 <div id="publicidadIzq">
                 </div>
                 
                 <div id="publicidadDer">
                 </div> 
      
                 <div id="ContenedorCentral">
       
                 <div id="PanelIzq">
                             
                    
                 <div id="Contenido">    
                        
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                        </asp:ContentPlaceHolder>
                        
                 </div>      
                     
                </div>     
        
          </div>
        
     </div>
        
    <div id="publicidadPie">    
         
     </div> 

    con los siguientes css para que quede primero la cabecera y abajo quede una parte Derecha (publicidad) una central (menu y contenido), otra Derecha (publicidad) y el pie abajo de todo.

    #ContenedorGeneral
    {
        padding: 0px;
        margin: 0px;
        min-width: 1000px;
        background-color: #000000;
        
    }
    
    #cuerpo
    {
        padding: 0px;
        margin: 0 auto 0 auto;
        border-spacing: 0px;
    }  
        
    
    #ContenedorCentral
    {
        margin: 0px auto 0px auto;
        background-color: #0066ff;
        padding: 0;
        
    }
    
    
    #cabeceraFlash
    {
        margin: 0px auto 0px auto;
        background-color: #0066FF;
        color: #666666;
        font-size: 12pt;
        font-weight: bold;
        padding: 0;
        height: 150px;
    }
    
    #Contenido
    {
        padding: 20px 0px 20px 0px;
        margin: 0px 160px 0px 415px;
        height: 100%;
        text-align: center;
        background-color: #FFFFFF;
    }
    
    
    #PanelIzq
    {
        margin: 0px auto 0px auto;
        padding: 0px 15px 0px 15px;
        width: 225px;
        float: left;
        background-color: #0066FF;
        height: 600px;
        text-align: center;
    }
    
    
    
    #publicidadIzq
    {
        padding: 0px;
        margin: 0px auto 0px auto;
        width: 160px;
        background-color: #000000;
        float: left;
        text-align: center;
        
    }
    
    #publicidadDer
    {
        padding: 0px;
        margin: 0px auto 0px auto;
        width: 160px;
        float: right;
        background-color: #000000;
        height: 600px;
        text-align: center;
    }
    
    #publicidadPie
    {
        margin: 0px auto 0px auto;
        background-color: #0066FF;
        padding: 3 10 3 10px;
        clear: both;
        text-align: center;
        height: 90px;
    }
    
    #publicidadPie p
    {
        
        margin: 0;
    }

    Con esto queda muy bien organizado y ajustable todo, pero lo que no consigo de ninguna manera es hacer que las columnas de la derecha e Izquierda (publicidades) sean ajustables igual que el contenido central. ya que al tener un contenido muy alto, el color de fondo de los Divs Izquierda y Derecha solo llega hasta donde llega el contenido de su propio div, que es mucho menos altura que el div centra.

    por lo cual si yo quiero que los div de los costados tengan un color negro de fondo, cuando el contenido central es muy alto, los divs con color negro solo llegan hasta una cierta altura y ya no se alargan hasta el final de la pagina.

    Espero que alguien me pueda ayudar a solucionar esto o decirme si me conviene hacerlo de otra forma.

    Saludos,

    Luispa

    martes, 12 de junio de 2012 17:58

Todas las respuestas

  • Hola,

    aquí tienes varios ejemplo de como conseguirlo aunque supongo que tendrás que adaptarlos un poco a un esquema

    http://www.desarrolloweb.com/articulos/columnas-altura-100-css.html

    http://peterned.home.xs4all.nl/examples/csslayout1.html

    http://elmanusito.wordpress.com/2008/06/25/css-height100/


    Atentamente, Sergio.

    Blog
    Twitter

    miércoles, 13 de junio de 2012 7:52
  • Hola Luispa

    El tema está más que nada centrado en la definición de la jerarquía de tu CSS.

    Como ejemplo solo incorpore un nuevo div que contiene a los bloques de publicidad de manera de definirlo con una vista de bloque para que tenga efecto los float que ubicas dentro de los div de publicidad izq y der.

    #cuerpo
    {
        padding: 0px;
        margin: 0 auto 0 auto;
        border-spacing: 0px;
    }  
    
    #publicidad
    {
        display:block;}
    
    #publicidadIzq
    {
        float:left;
        padding: 0px;
        margin: 0px auto 0px auto;
        width: 160px;
        background-color: #fff;
        text-align: center;
        
    }
    
    #publicidadDer
    {
        float: right;
        padding: 0px;
        margin: 0px auto 0px auto;
        width: 160px;
        background-color: #fff;
        height: 600px;
        text-align: center;
    }
    

    En el código html sería algo así:

    <body>
        <div id="ContenedorGeneral">
            <div id="cabeceraFlash">
            <p>cabeceraFlash</p>
            </div>
            <div id="cuerpo">
                <div id="publicidad">
                    <div id="publicidadIzq">
                    <p>Publicidad Izq</p>
                    </div>
                    <div id="publicidadDer">
                    <p>Publicidad Der</p>
                    </div>
                </div>
                <div id="ContenedorCentral">
                <p>
                    ContenedorCentral</p>
                    <div id="PanelIzq">
                    <p>PanelIzq</p>
                        <div id="Contenido">
                        <p>Contenido</p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="publicidadPie">
            <p>PublicidadPie</p>
            </div>
        </div>
    </body>

    y la vista que se obtiene es algo parecido a esto:

    Me parece que debes concentrarte un poco el layOut de tu página maestra con la ayuda de CSS y la forma de utilización de las propiedades display, float position entre otros.

    Saludos.


    Alcker AUS Ctes. Argentina

    lunes, 2 de julio de 2012 19:15