HTML - Problemas con diversos anidados y CSS

 
Vista:
sin imagen de perfil
Val: 5
Ha aumentado su posición en 3 puestos en HTML (en relación al último mes)
Gráfica de HTML

Problemas con diversos anidados y CSS

Publicado por Eduardo (3 intervenciones) el 12/01/2018 18:15:14
Hola a todos,

Tengo un problema con unos <div> anidados, con la siguente estructura:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="primerdiv">
	<h1>Hola a todos</h1>
	<div class="segundodiv">
	...
	...
	</div>
	<div class="tercerdiv">
	...
	...
	</div>
</div>
<footer>
...
..
</footer>

Resulta que el footer se me pone debajo del primer div y no tras terminar el flujo normal. Es decir, tras "tercerdiv".

Como puedo solucionarlo?

Muchas gracias

asimesale

asideberiaser
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 ricardo
Val: 94
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Problemas con diversos anidados y CSS

Publicado por ricardo (42 intervenciones) el 12/01/2018 18:59:18
Saludos ... que estas usando en tus div para posicionarlos , position, top, left, o float.... Muestranos !!!!
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
sin imagen de perfil
Val: 5
Ha aumentado su posición en 3 puestos en HTML (en relación al último mes)
Gráfica de HTML

Problemas con diversos anidados y CSS

Publicado por Eduardo (3 intervenciones) el 12/01/2018 19:18:11
Hola.
Gracias por responder.

En el div "principal" y footer nada, aunque he hecho alguna prueba. Entiendo que debe seguir el flujo html. En las dos columnas dentro del primer div, un float left y un float right respectivamente.
Si al div principal le pongo un height:680px; se soluciona, pero prefiero saber porque me pasa eso y como solucionarlo de manera correcta.

No te puedo pegar el código real, porque no estoy en casa.

Gracias
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
Imágen de perfil de ricardo
Val: 94
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Problemas con diversos anidados y CSS

Publicado por ricardo (42 intervenciones) el 12/01/2018 21:03:44
Bueno segun tu ejemplo... metes los div2 y 3, dentro del primero, y no quieres poner mucho largo (480px), ponlos todos por separado..o sea
cierra el primer div, antes de abrir otros...
si los quieres dentro del primero entonces esta bien que pongas un tamano (480px) donde pueda conter a los otros...y con sus float...


ya

el siguiente por separados...


ya1
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
sin imagen de perfil
Val: 5
Ha aumentado su posición en 3 puestos en HTML (en relación al último mes)
Gráfica de HTML

Problemas con diversos anidados y CSS

Publicado por Eduardo (3 intervenciones) el 13/01/2018 01:01:33
Si, la segunda opcion no tengo problema, ya que seria:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="primerdiv">
	<h1>Hola a todos</h1>
</div>
<div class="segundodiv"> (con un float left)
...
...
</div>
<div class="tercerdiv"> (con un float right)
...
...
</div>
<footer> (con un float left por ejemplo)
...
..
</footer>

Mi problema es para intentar solucionar la primera opcion. A ver si llego a casa y pongo el codigo.

Gracias
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
Imágen de perfil de Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Problemas con diversos anidados y CSS

Publicado por Lopez (271 intervenciones) el 13/01/2018 01:49:47
Hola Eduardo,

Esto te funcionara como ejemplo,
tu puedes adaptar mas los float, colores etc, pero en simple:

HTML
1
2
3
4
5
6
7
<header>
  <h1>Encabezado</h1></header>
<main>
  <div>A</div>
  <div>B</div>
</main>
<footer>pie</footer>

CSS

1
2
3
4
5
6
7
8
9
10
11
body,html{
height:100%;
  width:100%;
  padding:0;
  margin:0;
}
header, footer {
  display:inline-block;
  width:100%;
}
main > div {width:48%; float:left;}

Demo: https://codepen.io/lowpez/pen/ZvRXwO

Cuéntanos que tal,
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