[SOLUCIONADO] CSS y HTML se muestran así. ¿Cómo arreglarlo?

diegoguerrero · #1 (**permalink**) 01/09/2015, 15:34

Código CSS:

Ver original@charset "UTF-8";
/*GENERALES*/
a{
    text-decoration:none;
}
#h3{
    text-align: center;
    width: 100%;
    color: #D8E52C;
    height: 45px;
    line-height: 45px;
    vertical-align: middle;
    font-size:30px;
    font-family:"HelveticaNeue-Fina";
}
#pCuerpo{
   color: #000;
   font-size:18px;
   font-family:"HelveticaNeue-Fina";
}
@media (min-width: 450px){
    #izquierda{
        border: 1px solid black;
        text-align: center;
        align-content: center;
        width: 49%;
        margin: 0px;
    }
     #derecha{
        border: 1px solid black;
        text-align: center;
        align-content: center;
        width: 49%;
        margin: 0px 0px 0px 50%;
    }
}
/*LENGUA-CASTELLANA-Y-LITERATURA*/
    #len-div-h1{
        color: #FFFFFF;
        background-color: #2491C9;
        font-size: 45px;
        font-family: "HelveticaNeue-Fina";
        text-align: center;
        vertical-align: middle;
        line-height: 75px;
        height: 75px;
        width: 100%;
    }
    #len-div-h2{
        color: #FFFFFF;
        background-color: #2491C9;
        font-size: 23px;
        font-family: "HelveticaNeue-Fina";
        text-align: center;
        vertical-align: middle;
        line-height: 45px;
        height: 45px;
        width: 100%;
    }

Código HTML:

Ver original<!doctype html>
<head>
<link href="css.css" type="text/css" rel="stylesheet">
<meta charset="UTF-8">
<title>Síntesis 4º ESO</title>
</head>
<body>
<div id="cuerpecito">
<div id="izquierda">
    <div id="h3">Materias comunes</div>
    <div id="len-div-h2">Lengua</div>
</div>
<div id="derecha">
    <div id="h3">Materias comunes</div>
    <div id="len-div-h2">Lengua</div>
</div>
</div>
</body>
</html>

IMAGEN:

¿Cómo puedo hacer que las dos columnas queden a la misma altura? Muchas gracias. Una preguntita más: Lo estoy haciendo para ordenador. ¿Cómo lo podría hacer para el móvil? Muchas gracias.

AngelKrak · #2 (**permalink**) 01/09/2015, 17:48

jajajaja lo que me dio risa fue tu ID que le pusistes al Contenedor jajaja xD #cuerpecito

bueno amigo para arreglar tu error sigue estos pasos ;)

Busca en #derecha y Elimina: margin: 0px 0px 0px 50%; y cambia tu width: 49%; por width: 50%;

por Ultimo agregas esto a tu css ;)

Código CSS:

Ver original#izquierda, #derecha {
    display: inline-block;
}

http://codepen.io/anon/pen/qOBJVQ

siddartha23 · #3 (**permalink**) 01/09/2015, 20:49

Si izquierda y derecha van a llevar los mismos estilos, lo más optimo es usar una misma clase para ambos...