lunes, 6 de enero de 2014

Un div de ancho fijo y otro de ancho variable


Aunque parezca una tontería, puede ocasionarnos algún quebradero de cabeza el colocar en una página web un div de ancho fijo y el otro que ocupe el resto de la pantalla.

Aquí muestro un pequeño ejemplo que lo resuelve:

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>

<style>
    .divPrincipal {
    width: 90%;
    margin: 0 auto;
    padding: 5px;
}

 

.divIzquierdo {
    float: left;
    background-color: #96C;
    width: 100px;
    height: 50px;
    margin-right: 30px;
}

 

.divDerecho {
    overflow: hidden;
    height: 50px;
    background-color: #9FF;
}

</style>
</head>

<body>
    <div class="divPrincipal">
       <div class="divIzquierdo"></div>
       <div class="divDerecho"></div>
    </div>
</body>
</html>  

No hay comentarios:

Publicar un comentario

Un div de ancho fijo y otro de ancho variable

Aunque parezca una tontería, puede ocasionarnos algún quebradero de cabeza el colocar en una página web un div de ancho fijo y el otro que ...