[SOLUCIONADO] colocar div en linea

b44 · #1 (**permalink**) 23/02/2015, 11:10

Hola tengo el siguiente codoigo html

Código:

<!DOCTYPE html>
<html dir="ltr" lang="es-es">
  <head>
    <link href="compartidos/css/prueba.css" rel="stylesheet" type="text/css" media="all">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <title>Prueba</title>
 </head>
<body>
<!-- Inicia div padre -->
<div id="padre"><p>OBJETO PADRE</p>
	<!-- Inicia div hijo 1 -->
	<div id="hijo1"><p>OBJETO HIJO1</p>
	</div><!-- finalicia div hijo 1 -->
	<!-- Inicia div hijo 2 -->
	<div id="hijo2"><p>OBJETO HIJO2</p>
		<!-- Inicia div hijo 21 -->
		<div id="hijo21"><p>OBJETO HIJO21</p>
		</div><!-- finalicia div hijo 21 -->
		<!-- Inicia div hijo 22 -->
		<div id="hijo22" ><p>OBJETO HIJO22</p>
		</div><!-- finalicia div hijo 22 -->
	</div><!-- finalicia div hijo 2 -->
	<div id="hijo3"><p>OBJETO HIJO3</p>
	</div><!-- finalicia div hijo 3 -->
</div><!-- finalicia div padre -->
</body>
</html>

y el siguiente codigo CSS

Código:

position:relative;

z-index:1;

margin-left:auto;
margin-right:auto;

padding:1em;

width:100%;

border: 3px solid red;

}

/*Div hijo1*/

div#hijo1{

position:relative;

width:50%;

height:20%;

border: 3px solid blue;

}

/*Div hijo2*/

div#hijo2{

position:relative;

width:50%;

height:20%;

border: 3px solid green;

}

/*Div hijo21*/

div#hijo21{

position:relative;

width:45%;

border: 3px solid brown;

}

/*Div hijo22*/

div#hijo22{

position:relative;

width:45%;

border: 3px solid yellow;

}

/*Div hijo22*/

div#hijo3{

position:relative;

width:50%;

height:20%;

border: 3px solid blue;

}

.flota{

float:left;

}

body{

margin-left : auto;

margin-right : auto;

padding:1em;

width:100%;

border: 3px solid yellow;

}

La cuestion es que tengo dos problemas:
1ª Quiero colocar hijo 21 e hijo 22 dentro de hijo 2 pero alineados horizontalmente con un tamaño de un 45% cada uno pero siempre me lo coloca en el div hijo 2 debajo (verticalmente) o en el div tres o de pendiendo de si es position:relative o si es position:absolute

2º nTampoco entiendo porque div padre si tiene (margin-left:auto; margin-right:auto;) se sale de body creo qu deberia permanecer dentro ¿ no ?

b44 · #2 (**permalink**) 23/02/2015, 11:13

Ruego a los moderadores que muevan este mensaje a la seccion de CSS pensaba que estaba en esa seccion

GeekGirl · #3 (**permalink**) 23/02/2015, 11:18

El body siempre ocupa el 100% de la pantalla. Es incorrecto setearle el ancho. Elimina esa línea de tu CSS.

En cuanto al display de los divs hijo21 e hijo22, simplemente dale a ambos la propiedad display: inline-block;
De esta manera se van a mostrar como elementos de línea (uno junto al otro y no ocupando todo el ancho de la línea) y a la vez van a conservar las propiedades de un elemento de bloque para definir su ancho y alto entre otras.

Recuerda que si usas ids, no hace falta que le antepongas el selector div ya que los mismos no se repiten (o al menos no deberían). Y quita esos position: relative que no tienen razón de ser excepto en el caso en el que usas z-index.

Saludos :)

b44 · #4 (**permalink**) 23/02/2015, 11:57

Muchas Gracias se ha arreglado todo aunque todavia noel ancho de objeto padre sobresale del body por la derecha

Código:

/*Div padre*/

#padre{

position:relative;

z-index:1;

margin-left:auto;

margin-right:auto;

padding:1em;

width:100%;

border: 3px solid red;

}

/*Div hijo1*/

#hijo1{

width:50%;

height:20%;

border: 3px solid blue;

}

/*Div hijo2*/

#hijo2{

width:50%;

height:20%;

border: 3px solid green;

}

/*Div hijo21*/

#hijo21{

width:45%;

border: 3px solid brown;
display: inline-block;

}

/*Div hijo22*/

#hijo22{

width:45%;

border: 3px solid yellow;
display: inline-block;

}

/*Div hijo22*/

#hijo3{

width:50%;

height:20%;

border: 3px solid blue;

}

.flota{

float:left;

}

body{

margin-left : auto;

margin-right : auto;

padding:1em;

border: 3px solid yellow;

}

GeekGirl · #5 (**permalink**) 23/02/2015, 12:24

Sacale el width: 100%; a padre

b44 · #6 (**permalink**) 24/02/2015, 05:06

Muchas Gracias ahora lo entiendo.
Una pregunta mas los div objeto hijo 21 y objeto hijo 22 los tengo ahora alineados horizontalmente pero cuando escribo en ellos se ajustan al pie he utilizado top:; pero no logro que el div contenerse ajuste al 0% unicamente lo he logrado con una class aplicandolo a un <p class="ajustearriba"></p>.

¿Se puede ajustar un div que esta dentro de otro div arriba?

GeekGirl · #7 (**permalink**) 24/02/2015, 06:09

No entendí la pregunta... lo que querés es que el div mantenga siempre una altura fija? O que si se ajusta el alto de uno con respecto al contenido también se ajuste el otro? O ninguna de las dos cosas? xD

b44 · #8 (**permalink**) 24/02/2015, 06:40

Voy a ntentar explicarlo mejor:
Un div de nombre contenedor tiene tres div en su interior 1a, 1b, 1c, (alineados horizontalmente "display:inline-block;").
Quiero que estos div, 1a, 1b y 1c, que se encuentran en el interior del denominado div contenedor, se ajusten a la parte superior del denominado div contenedor.

Me ocurre que al escribir un texto de tres frases en el div 1a y un tecto mayor por ejemplo 10 frases en el div 1b o 1c el div 1a se me ajusta a la parte de abajo del div contenedor dejando un hueco con el top del div contenedor

GeekGirl · #9 (**permalink**) 24/02/2015, 06:45

En el caso de tu ejemplo, los divs hijos de "hijo2" se muestran debajo porque hijo2 tiene como primer elemento un párrafo (elemento de bloque), que como te comenté ocupa todo el ancho de la línea. Si eliminas el párrafo no vas a tener problemas:

Código HTML:

<div id="padre">
    <p>OBJETO PADRE</p>
    <div id="hijo1">
        <p>OBJETO HIJO1</p>
    </div>
    <div id="hijo2">
        <!-- <p>OBJETO HIJO2</p> --><!-- Este elemento de bloque trae problemas con la visualización -->
        <div id="hijo21">
            <p>OBJETO HIJO21</p>
        </div>
        <div id="hijo22">
            <p>OBJETO HIJO22</p>
        </div>
    </div>
    <div id="hijo3">
        <p>OBJETO HIJO3</p>
    </div>
</div>

b44 · #10 (**permalink**) 24/02/2015, 07:05

Te he subido el ejemplo a esta direccion para que puedas ver lo que digo:

http://xelene.zz.vc/

Quiero que hijo 21 (cuadro marron) se alinee en la parte superior con hijo 2 cuadro verde el hueco quedara debajo y el cuadro amarillo que es hijo 22 siga alineado a la parte superior.

b44 · #11 (**permalink**) 24/02/2015, 11:58

Bueno gracias por todo ya creo qeu he encontrado la solucion.

Le he aplicado

Código:

vertical-align: top;

y ahora funciona correctamente todos los div se alinean arriba

Muchas gracias por tu ayuda

pzin · #12 (**permalink**) 24/02/2015, 13:32

Lo muevo a CSS. Usa el botón del triángulo para reportar mensajes.