Div anidado

borjagat · #1 (**permalink**) 15/08/2015, 04:34

Hola

Quisiera saber como hacer para anidar divs. mi idea es

tener un div(primer div) del 30% y luego un div(segundo div) del 70% el cual tenga otros dos div dentro que ocupan el 50% de este div. El problema esta que a veces el primer div desaparece y quisiera quisiera que los div internos sean el 50% del segundo div.

xfxstudios · #2 (**permalink**) 15/08/2015, 06:03

con css:

Código PHP:

Ver original<style>
html, body{
    height:100%;
}
body{
    margin:0;
}
#a{
    width:100%;
    height:30%;
    
    background-color:rgba(0,67,123,1.00);
}
#b{
    width:100%;
    height:70%;
    
    background-color:rgba(255,110,0,1.00);
}
#c{
    display:block;
    position:relative;
    float:left;
    
    width:50%;
    height:100%;
    
    background-color:rgba(255,0,4,1.00);
    
    border-radius:200px;
}
    
</style>
<!--div superior-->
<div id="a">
</div>
 
<!--div inferior-->
<div id="b">
 
    <!--div central-->
    <div id="c">
    </div>
    
    <div id="c">
    </div>
 
</div>

borjagat · #3 (**permalink**) 16/08/2015, 09:23

No me explique correctamente. a mide un 30% y esta al lado de b que mide un 70% en determinados momentos a desparece y entonces b tiene que coger todo el tamaño de a y b repartirlo

borjagat · #4 (**permalink**) 16/08/2015, 11:26

Y más dudas. Como hago lo siguiente? Hola mundo debe ser azul sin poner la etiqueta. me gustaria que heredase algunas cosas del div padre. Es posible o debe declararlas?

<!DOCTYPE html>
<html>
<body>

<p>This is some text.</p>

<div style="background-color:#0000FF">

<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
<div style="display:block;float:right;">
hola mundo
</div>
</div>

<p>This is some text.</p>

</body>
</html>

cuando tienes dos div dentro de un div padre como hago para que lo coloree todo de azul y acabe a la misma altura?

xfxstudios · #5 (**permalink**) 16/08/2015, 15:36

Cita:

Iniciado por borjagat

No me explique correctamente. a mide un 30% y esta al lado de b que mide un 70% en determinados momentos a desparece y entonces b tiene que coger todo el tamaño de a y b repartirlo

aunque no lo creo no entiendo ni papas de lo que intentas hacer, el asunto es que no dices si es en vertical o horizontal que estan esos porcentajes, es decir 30% de alto o de ancho, practicamente todo lo haces con css no veo cual es el problema y menos si no te explicas bien que es lo que necesitas lograr, seria algo asi pero con la poca info no podria ayudarte mucho:

Código PHP:

Ver original<style type="text/css">
@media screen and (min-width:500px){
.a{
    display:inline-block;
    position:relative;
    float:left;
    
    width:30%;
    height:150px;
    
    background-color:rgba(0,67,123,1.00);
 
}
.b{
    display:inline-block;
    position:relative;
    float:left;
    
    width:70%;
    
    height:150px;
    
    background-color:rgba(255,110,0,1.00);
}
 
}
@media screen and (max-width:480px){
.a{
    display:none;
 
}
.b{
    display:inline-block;
    position:relative;
    float:left;
    
    width:100%;
    
    height:150px;
    
    background-color:rgba(255,110,0,1.00);
}
 
 
}
 
</style>
 
<div class="a">
<p>Mido 30%</p>
</div>
<div class="b">
<p>Mido 70%</p>
</div>