Buenas estoy intentando maquetar una página con css con un header , una columna a la izquierda , otra a la derecha y debajo de ello el footer.
Al estilo
|---- header ------------------------------
|---------------------------| pag.derecha|
|------PAQ. IZQU--------| pag.derecha|
|---------------------------| pag.derecha|
|------ footer ------------------------------
El código que tengo es este
Código PHP:
<div class="page">
<div class="header">
<div class="content">
<div class="col-left"></div>
<div class="col-right"> </div>
</div>
</div>
</div>
Y sus css correspondientes
Código PHP:
body{
width:1000px;
margin:auto;
color: red;
font-family: sans-serif;
font-size:10pt;
}
.col-left{
font-family: sans-serif;
font-size:10pt;
float:left;
width:70%;
/*height:750px;*/
height:100%;
position: relative;
border:1px solid black;
}
.col-right{
font-family: sans-serif;
font-size:10pt;
float:right;
width:29%;
/*height:750px;*/
height:100%;
position: relative;
border:1px solid black;
}
.content{
margin-left:4px;
font-family: sans-serif;
font-size:10pt;
width: 100%;
height: 605px;
position: relative;
color : black;
display : block;
}
.footer{
font-family: sans-serif;
font-size:10pt;
margin-top:150px;
width: 100%;
height: 50px;
border:1px solid black;
color : red;
position: relative;
}
.header{
font-family: sans-serif;
font-size:10pt;
width: 100%;
margin-bottom:5px;
height: 150px;
position: relative;
color : blue;
border:1px solid black;
}
.page{
position: relative;
margin-left: 200px;
left: 50;
right: 10;
width: 100%;
height: 100%;
border: 1px solid red;
}
.header .navglobal li{
/*list-style:none;-*/
display:inline;
}
El problema que tengo es que si lo que muestro tiene más de 800px se me sale el texto del div , lo que buscaria seria algo como que el "div" creciese si es necesario.
Gracias,