Div no se ajusta

fonchi · #1 (**permalink**) 26/08/2012, 13:32

Hola amigos:

Les escribo por lo siguiente, Tengo un div, el cual contiene en su interior 3 div más: derecho, izquierdo e inferior , el tema es que al minimizar, el div derecho no se me ajusta, quedando debajo del izquierdo y sobre el inferior. es como que no se ajusta al tamaño minimizado del div contenedor, eso creo, pero no se como arreglarlo.

alguna ayuda porfa, de antemano gracias y salu2.

adjunto parte del código css:

BODY {

background-color:#FFF;
background-color:gray;
text-align : justify;
line-height: 10px;
}

#CONTAINER {
background-color:#black;
border-style:inset;
border-color:#000000;
border-width:0px;
margin: 0 auto;
width:850px;
height:auto;
border-width:thin;
}

.header{
width:100%;
height:227%;
border-bottom-style:solid;
border-bottom-color:black;
}

.izq{
border-style:solid;
border-width:1px;
border-color:#000000;
height:120px;
width:300px;
float:left;
}

.der{
border-style:solid;
background-color:black;
border-width:1px;
border-color:#000000;
height:120px;
width:699px;
float:left;
}

.inferior{
border-style:solid;
border-width:1px;
border-color:#000000;
height:105px;
clear:both;
}

.principal{
width:600px;
height:auto;
background-color:#FFF;
border-style:solid;
border-width:1px;
border-color:#000000;
margin:0 5px 0 117px;
padding:10px;
}
.footer{
width:auto;
height:30px;
background-color:#FFF;
border-style:solid;
border-width:1px;
border-color:#000000;
margin:5px;
}

JairLizcano · #2 (**permalink**) 26/08/2012, 14:32

Algunas características de tu hoja de estilos no me gustaron, ahora bien, te comparto algo que hice para ti:

Código HTML:

<html>
    <head>
        <style media = 'screen' type = 'text/css'>
            html, body {

                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }

            #container {

                width: 100%;
                height: 50%;
                font-size: 0px;
            }

            .Right {

                display: inline-block;
                width: 50%;
                height: 30%;
                background-color: red;
            }

            .Left {
             
                display: inline-block;
                width: 50%;
                height: 30%;
                background-color: green;
            }

            .Bottom {

                width: 100%;
                height: 30%;
                background-color: purple;
            }
        </style>
        <title></title>
    </head>
    <body>
        <div id = 'container'>
            <div class = 'Right'>
            </div>
            <div class = 'Left'>
            </div>
            <div class = 'Bottom'>
            </div>
        </div>
    </body>
</html>

Espero te sirva.

Buena suerte.

fonchi · #3 (**permalink**) 26/08/2012, 16:17

Probaré, salu2 y gracias.