CSS - Una muy sencilla sobre "div"

   
Vista:

Una muy sencilla sobre "div"

Publicado por Pepe pmruano@gmail.com (2 intervenciones) el 16/03/2018 13:22:33
Buenos días. Como digo en el título tiene que ser sencillito, pero no doy con ello.
El caso es que cuando hago el border al selector "body" me deja excluidos los contenidos de los selectores "libros" y "fotos" ( que son realmente imágenes pero que da igual...).
He intentado ponerle la orden CSS al selector "contenedor" pero tampoco funciona y los deja fuera.
Qué hago mal? Gracias a todos.
Pepe

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
 
<style>
 
body{
	border:3px solid navy;
	width:850px;
	margin:auto;
	padding:0 15px;
}
 
.libros{
	float:left;
	}
 
.fotos{
	float:right;
	}
 
</style>
 
</head>
 
<body>
 
<div id="contenedor">
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut dolor turpis. Donec laoreet ac est eu mattis. Nam eget mauris congue, aliquam velit nec, euismod lorem. Curabitur cursus in lectus id maximus. Quisque quis sodales mauris. Vivamus tempor feugiat urna ac eleifend. Phasellus aliquet accumsan libero, at varius odio convallis non. </p>
 
    <div class="libros">
        <ul>
            <li> Primavera-IZQ</li>
            <li> Verano</li>
            <li> Otoño</li>
            <li> Invierno</li>
        </ul>
    </div>
 
    <div class="fotos">
        <ul>
            <li> Primavera-DER</li>
            <li> Verano</li>
            <li> Otoño</li>
            <li> Invierno</li>
        </ul>
	</div>
 
</div>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de santi

Una muy sencilla sobre "div"

Publicado por santi (10 intervenciones) el 18/03/2018 22:18:15
Hola,

Prueba a envolver los 2 div dentro de uno y añadir otro debajo con un clear:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="content">
	<div class="libros">
        <ul>
            <li> Primavera-IZQ</li>
            <li> Verano</li>
            <li> Otoño</li>
            <li> Invierno</li>
        </ul>
    </div>
 
    <div class="fotos">
        <ul>
            <li> Primavera-DER</li>
            <li> Verano</li>
            <li> Otoño</li>
            <li> Invierno</li>
        </ul>
	</div>
    <div class="clear"></div>
</div>

Y en el css añade un overflow:auto y el clear:

1
2
3
4
5
6
#content {
    overflow: auto;
}
.clear {
    clear: both;
}

Prueba a ver ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

Una muy sencilla sobre "div"

Publicado por Pepe (2 intervenciones) el 19/03/2018 11:28:00
Santi, muchas gracias por responder y por hacerlo tan acertadamente. Me ha funcionado de maravilla. Ahora sólo tengo que "estudiar" un poco lo que me has dicho para sucesivas. Gracias de nuevo y saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar