Hola a todos!
Estoy atascado con una cosa que no encuentro solucion en Google.
Lo explico con fotos que es mas fácil:
Quiero hacer algo asi:
https://www.dropbox.com/s/mar2r041t7...2019.20.11.png
Pero se me queda así:
https://www.dropbox.com/s/13ly2qq6dp...2019.20.36.png
El rectangulo de la izquierda es una imagen con float left, y el titulo tiene un borde de max-width:60%, pero se me desplaza a la izquierda.
Pongo el codigo css para que quede todo mas detallado:
Código:
.lightbox {
font-family:Helvetica, sans-serif;
font-weight:100;
}
h2.lightbox {
color:Orange;
border-bottom:solid 1px orange;
max-width:60%;
text-align:left;
display:block;
}
img.lightbox {
float:left;
margin:10px 20px;
display:block;
clear:both;
}
p.lightbox{
display:block;
overflow:auto;
}
Y este es el codigo html:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="http://www.forosdelweb.com/f53/Imagenes/servicios/interior.jpg" width="300" height="398" alt="Limpieza de interiores" class="lightbox"/>
<h2 class="lightbox">Titulo del texto</h2>
<p class="lightbox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum feugiat lectus quis blandit vestibulum. Cras tincidunt arcu sed quam malesuada varius et sed sem. Suspendisse scelerisque mauris a malesuada dapibus. Mauris venenatis nulla sed ligula faucibus, ac molestie nulla imperdiet. Vivamus sed mauris ac erat imperdiet lobortis. Fusce eget accumsan ante, nec ultrices sapien. Fusce quis ultricies nunc, et commodo felis. Nunc lacinia nisi id tempus bibendum. Pellentesque tempus, tellus sit amet mattis tempor, mi nunc blandit purus, et accumsan odio mauris quis neque. Fusce sagittis tempor ultricies. Suspendisse gravida, metus nec dapibus dictum, nulla velit ullamcorper dolor, nec lobortis lacus eros vel risus.</p>
</body>
</html>
¿Alguien me podría explicar como solucionarlo?
Gracias!!