Salve,
Per esercizio sto facendo delle prove con HTML5 e CSS. Il mio problema come si vede dall'immagine e che gli aside left e right rimangono solo negli angoli senza avere il height al 100% tra lo header e il footer. Quello che voglio che appaia una colonna a sinistra a destra che rimane per tutta la altezza tra lo header e il footer. Di seguito il codice. Grazie dell'aiuto
Per esercizio sto facendo delle prove con HTML5 e CSS. Il mio problema come si vede dall'immagine e che gli aside left e right rimangono solo negli angoli senza avere il height al 100% tra lo header e il footer. Quello che voglio che appaia una colonna a sinistra a destra che rimane per tutta la altezza tra lo header e il footer. Di seguito il codice. Grazie dell'aiuto
HTML:
<head>
<meta charset="UTF-8">
<title>Sample</title>
<link rel="stylesheet" href="../Css/sample.css">
</head>
<body>
<header>
<h1>HEADER</h1>
</header>
<div class="container">
<aside class="left">
<h2>LEFT</h2>
</aside>
<aside class="right">
<h3>RIGHT</h3>
</aside>
<section>
<p></p>
</section>
</div>
<footer>
<h4>FOOTER</h4>
</footer>
</body>
Codice:
html {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
/*background-color: #dac7c7;*/
}
header {
position: relative;
background-color: #E9E9E9;
padding: 40px 0;
text-align: center;
top: 0;
width:100%;
}
div.container {
width: 100%;
height: auto;
background-color: red;
}
aside.left {
background-color: blue;
position: relative;
float: left;
height: 100%;
}
aside.right {
background-color: blue;
position: relative;
float: right;
height: 100%;
}
section {
}
footer {
clear:both;
background-color: #3f3f3f;
color: #FFF;
padding: 15px 0;
text-align: center;
position:absolute;
bottom:0;
width:100%;
height:60px;
}
Ultima modifica di un moderatore:
