CSS - alinear en div con margen y ancho en %

   
Vista:
Imágen de perfil de andre

alinear en div con margen y ancho en %

Publicado por andre (2 intervenciones) el 27/05/2014 23:32:03
saludos,
necesito algo de ayuda porfavor, necesito alinear un div al centro de otro div que ocupe el 100% del navegador, pero con un margen izquierdo de 200px.


un codigo vale mas que mil palabras. la idea es que el div amarillo quede centrado en el div verde en cualquier tamaño de ventana. hace unos 3 dias que estoy en esto y no puedo solucionarlo, gracias.

1
2
3
4
5
6
<style>
#cont  {width:99%;border:solid 1px red; height:99%;display:table;}
#a      {border:solid 1px blue;float:left;width:200px;}
#b      {border:solid 1px green; float:left;}
#cen  {border:solid 1px yellow;width:300px;}
</style>
---------------------------------------------------------------------------------------------------
1
2
3
4
5
6
7
<body>
<div id="cont">
<div id="a">dd</di v>
<div id="b"><div id="cen">kepaza</div></div>
 
</div>
</body>
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 xve

alinear en div con margen y ancho en %

Publicado por xve (349 intervenciones) el 28/05/2014 08:10:54
Hola Andre, el problema que tienes, es que el div b (verde) esta flotando (float) por lo que no tiene anchura, su anchura, es la que ocupe su contenido, que en este caso es el div cen (amarillo), por lo que para poder centrarlo, tienes que ponerle una anchura...

Revisa este código de ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
 
    <style>
    #cont  {width:99%;border:solid 1px red; height:99%;display:table;}
    #a      {border:solid 1px blue;float:left;width:200px;}
    #b      {border:solid 1px green;float:left;width:500px;}
    #cen  {border:solid 1px yellow;width:100px;margin:auto;}
    </style>
</head>
 
<body>
<div id="cont">
    <div id="a">dd</div>
    <div id="b">
        <div id="cen">kepaza</div>
    </div>
</div>
</body>
</html>

Coméntanos, ok?
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 andre

alinear en div con margen y ancho en %

Publicado por andre (2 intervenciones) el 28/05/2014 21:28:44
oo gracias, no creí que alguien respondería :)

lo que pasa es que necesito que el div #b ocupe todo el resto del navegador, y ahi centrar el div #cen.
de manera que quede centrado en cualquier tamaño de navegador, pero centrado en el div #b.
no se si se puede hacer eso con css o alguna otra forma.

gracias igual por tu ayuda.
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 xve

alinear en div con margen y ancho en %

Publicado por xve (349 intervenciones) el 29/05/2014 08:02:59
Hola Andre, algo así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
 
    <style>
    #cont   {width:99%;border:solid 1px red; height:99%;display:table;}
    #a      {border:solid 1px blue;width:20%;float:left;}
    #b      {border:solid 1px green;width:79%;float:right;}
    #cen    {border:solid 1px yellow;text-align:center;}
    </style>
</head>
 
<body>
<div id="cont">
    <div id="a">dd</div>
    <div id="b">
        <div id="cen">kepaza</div>
    </div>
</div>
</body>
</html>

Coméntanos, ok?
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