Estoy haciendo una web, con el típico apartado de noticias, estructurado de la siguiente forma:
<div #main>
<div .noticia>
<h1>titulo</h1>
<p>Texto</p>
</div>
<div .noticia>
<h1>titulo</h1>
<p>Texto</p>
</div>
...
</div>
Hasta aqui todo bien, el tamaño de bloque ".noticia" se ajusta al texto que contiene, pero el problema surge cuando inserto una imagen, ya que esta no se ajusta al bloque y pisa la siguiente notícia. Como lo hago para que el DIV .noticia se ajuste a su contenido, sea el que sea? Donde fallo?
GRACIAS!
Os adjunto un ejemplo del codigo HTML y CSS
Código HTML:
<div id="noticia"> <h1 class="noticia"> Titulo noticia </h1> <p class="noticia"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id diam vel dolor viverra volutpat. Donec dui magna, viverra sit amet rhoncus at, imperdiet eget mauris. Aliquam eu est velit, dignissim laoreet tortor. Donec tincidunt, ut bibendum rhoncus, odio tortor ultricies lorem, faucibus cursus metus lectus nec dolor. In nibh odio, rhoncus nec ultricies sed, congue id dui. Sed quis laoreet neque. Donec elementum, nunc in convallis pulvinar, mi velit bibendum lorem, ut auctor neque arcu at odio. Phasellus pharetra laoreet accumsan. Nulla eu sem tincidunt metus blandit accumsan. Nulla facilisi. </p> <p class="noticia"> <img src="http://stockimagesaustralia.com/wp/gallery/images/232/?750,500,,100,100,1398775372" alt="Imatge" /> Vivamus id diam vel dolor viverra volutpat. Donec dui magna, viverra sit amet rhoncus at, imperdiet eget mauris. Aliquam eu est velit, dignissim laoreet tortor. Donec tincidunt, felis ut bibendum rhoncus, odio tortor ultricies lorem, faucibus cursus metus lectus nec dolor. In nibh odio, rhoncus nec ultricies sed, congue id dui. Sed quis laoreet neque. Donec elementum, nunc in convallis pulvinar, mi velit bibendum lorem, ut auctor neque arcu at odio. Phasellus pharetra laoreet accumsan. Nulla eu sem tincidunt metus blandit accumsan. Nulla facilisi. </p> </div>
Código HTML:
body {
background: black;
}
#noticia{
border-bottom: 5px solid #fff;
width: 90%;
height:auto;
margin: 5%;
background-color:black;
}
p.noticia {
color: #BDBDBD;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
letter-spacing:0.1em;
text-align:justify;
line-height: 145%;
font-size: 12pt;
}
h1.noticia {
color: gray;
font-family: 'Hoefler Text', Georgia, 'Times New Roman', serif;
font-weight: normal;
font-size: 40px;
letter-spacing: .2em;
line-height: 1.1em;
margin:0px;
text-align: left;
text-transform: uppercase;
}
.noticia img{
margin:5px;
float:right;
width: 200px;
display: block;
}
