Ciao ragazzi, ho il seguente problema:
ho creato un div (d1) di altezza minima 250px larghezza 100%, all'interno ci sarà un'immagine 250x250 e del testo contenuto a sua volta da un div. Sotto il div d1 c'è un div (Separatore) che avrà il compito di separare il div d1 dal successivo div che sarà dello stesso tipo di d1. Il problema è che il separatore va sotto il testo anche sovrapponendosi all'immagine mentre quello che vorrei è che questo separatore vada in generale sotto al div d1 senza sovrapporsi a niente. avete idee su come fare?
Codice HTML
<html>
<head>
<title> prova </title>
<!-- inserisco file css esterno -->
<link href="prova.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="blocco">
<div class="bloccoImm"> <img class="immagine" src="marmo2.jpg" alt="Int" /> </div>
<div classs="testo">ciaos dfs jksdjf jlksadhf jhsdjkfh skjdhfjsdhf h hjsdh fjhsd kjfhdsj
testo da inerire
<div>
</div>
<div class="separatore">1 </div>
</div>
</body>
</html>
Codice CSS
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.blocco{
display:block;
background:yellow;
width:100%;
min-height:250px;
height:auto;
position:relative;
border:1px solid black;
}
.bloccoImm{
position:relative;
height:250px;
width:250px;
border:1px solid black;
float:left;
}
.immagine{
position:relative;
width:100%;
height:100%;
}
.separatore{
height:5%;
width:100%;
background:red;
position:relative;
border:1px solid black;
}
.testo{
position:relative;
min-height:300%;
width:70%;
float:right;
border:1px solid black;
}