Ciao,
nell'html/css di sotto c'è una bozza del layout che vorrei ottenere.
Non riesco a spostare la barra nera nella parte superiore.
I div con testo devono rimanere adattabili ed il footer deve essere sempre sotto ad essi.
Come si può fare?
<html>
<head>
<title>CSS Demo: Expanding divs to surround their floated contents</title>
<style>
div{
margin:0px;
padding:0px;
border: none;
outline: 0;
}
#container {
border: 1px solid pink;
background-color: #ccc;
position:absolute;
top:157px;
}
#floated_div {
float:left;
width: 49%;
border: 1px solid red;
text-align:justify;
}
#content_div {
float:right;
width: 49%;
border: 1px solid blue;
text-align:justify;
}
#SiteFooter
{
height:30px;
background-color:green;
}
#BlackRibbonTopBackground {
height:154px;
background-color: black;
}
</style>
<head>
<body>
<div id="BlackRibbonTopBackground" />
<div id="container">
<div id="floated_div">
Donec elementum, tortor ut facilisis eleifend, diam sem lobortis libero, sed tristique augue urna a nibh. In rhoncus pellentesque felis, sit amet vulputate arcu ultricies quis. Praesent odio metus, sodales vel pharetra quis, fringilla non ligula. Praesent magna mi, consequat non lacinia sed, sagittis quis velit. Phasellus fermentum, mauris sed faucibus mollis, ipsum massa placerat metus, accumsan posuere tellus turpis vitae magna. Suspendisse consequat auctor lorem, id auctor ante posuere non. Nunc ultricies tincidunt nunc, vitae iaculis ipsum convallis sed. Nunc et velit rhoncus velit tristique luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.</p>
Donec elementum, tortor ut facilisis eleifend, diam sem lobortis libero, sed tristique augue urna a nibh. In rhoncus pellentesque felis, sit amet vulputate arcu ultricies quis. Praesent odio metus, sodales vel pharetra quis, fringilla non ligula. Praesent magna mi, consequat non lacinia sed, sagittis quis velit. Phasellus fermentum, mauris sed faucibus mollis, ipsum massa placerat metus, accumsan posuere tellus turpis vitae magna. Suspendisse consequat auctor lorem, id auctor ante posuere non. Nunc ultricies tincidunt nunc, vitae iaculis ipsum convallis sed. Nunc et velit rhoncus velit tristique luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.</p>
Donec elementum, tortor ut facilisis eleifend, diam sem lobortis libero, sed tristique augue urna a nibh. In rhoncus pellentesque felis, sit amet vulputate arcu ultricies quis. Praesent odio metus, sodales vel pharetra quis, fringilla non ligula. Praesent magna mi, consequat non lacinia sed, sagittis quis velit. Phasellus fermentum, mauris sed faucibus mollis, ipsum massa placerat metus, accumsan posuere tellus turpis vitae magna. Suspendisse consequat auctor lorem, id auctor ante posuere non. Nunc ultricies tincidunt nunc, vitae iaculis ipsum convallis sed. Nunc et velit rhoncus velit tristique luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.</p>
</div>
<div id="content_div">
Donec elementum, tortor ut facilisis eleifend, diam sem lobortis libero, sed tristique augue urna a nibh. In rhoncus pellentesque felis, sit amet vulputate arcu ultricies quis. Praesent odio metus, sodales vel pharetra quis, fringilla non ligula. Praesent magna mi, consequat non lacinia sed, sagittis quis velit. Phasellus fermentum, mauris sed faucibus mollis, ipsum massa placerat metus, accumsan posuere tellus turpis vitae magna. Suspendisse consequat auctor lorem, id auctor ante posuere non. Nunc ultricies tincidunt nunc, vitae iaculis ipsum convallis sed. Nunc et velit rhoncus velit tristique luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi.</p>
</div>
</div>
<div id="sitefooter"></div>
</body>
</html>
Rispondi quotando
