CSS3 se ríe de mi

Archivado
Estoy picando el código de una web desde cero y me he encontrado con que no consigo hacer un diseño de dos columnas de la manera más simple.
He escrito algo similar a esto:
<body>
  <div>
    <section id="principal"> Mi contenido </section>
    <aside id="lateral"> Mi contenido 2 </aside>
  </div>
</body>


A lo que le aplico lo siguiente:
#principal {
  float: left;
  width: 660px;
  padding: 20px;
}
#lateral {
  float: left;
  width: 220px;
  padding: 20px;
}

Y sin embargo no muestra dos columnas en la misma fila, sino que sigue mostrando el <aside> como un bloque bajo <section> (y bajo <footer>, aunque imagino que esto es porque todavía no le he aplicado ninguna propiedad al este).
¿Puede ser porque estoy cargando el contenido en el navegador desde un archivo(ruta file:///)?
También he probado a cambiar el valor del float lateral a right, por si las moscas, pero sigue mostrándolo en la fila inferior, aunque el margen al que se pegue sea el derecho.
Te debería mostrar #lateral a la derecha de #principal cuando caben los dos y debajo cuando no.
Caben perfectamente, de ahí mi cara de poker al verlo.
A mi me funciona correctamente.

<!DOCTYPE html>
<html>
<head>
<style>
#principal {
  float: left;
  width: 660px;
  padding: 20px;
  background-color:blue;
}
#lateral {
  float: left;
  width: 220px;
  padding: 20px;
  background-color:red;
}
</style>
</head>

<body>
  <div>
    <section id="principal"> Mi contenido </section>
    <aside id="lateral"> Mi contenido 2 </aside>
  </div>
</body>
</html>


MI pantalla es de 17 asi que mide 1024*768. ¿Cuanto mide la tuya?
Mira a ver si heredan algo, el código tal como lo has puesto debería hacer lo que quieres.
Recuerda que las clases se utilizan para los estilos y los id's se utilizan para JS. Es bueno aplicar las buenas practicas y así te evitarás problemas como estos

Te recomiendo este articulo: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
daniel-chaur escribió:Recuerda que las clases se utilizan para los estilos y los id's se utilizan para JS. Es bueno aplicar las buenas practicas y así te evitarás problemas como estos

Te recomiendo este articulo: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Estoy siguiendo "El gran libro de HTML5, CSS3 y JavaScript" y hacen uso de id para ello, por eso tiré de id.
alex120 escribió:A mi me funciona correctamente.
Edit: Ahora mismo me leo el artículo, gracias ;)
<!DOCTYPE html>
<html>
<head>
<style>
#principal {
  float: left;
  width: 660px;
  padding: 20px;
  background-color:blue;
}
#lateral {
  float: left;
  width: 220px;
  padding: 20px;
  background-color:red;
}
</style>
</head>

<body>
  <div>
    <section id="principal"> Mi contenido </section>
    <aside id="lateral"> Mi contenido 2 </aside>
  </div>
</body>
</html>


MI pantalla es de 17 asi que mide 1024*768. ¿Cuanto mide la tuya?

Mi pantalla es de 1920*1080.
Raeh escribió:Mira a ver si heredan algo, el código tal como lo has puesto debería hacer lo que quieres.
Tal como lo tengo copiado del libro.

Aquí tenéis los códigos, yo no veo nada raro en ellos, pero ante los ojos de un novato...
* {
    margin: 0px;
    padding: 0px;
}

h1 {
    font: bold 20px QwarsSans, sans-serif;
}

h2 {
    font: bold 14px QwarsSans, sans-serif;
}

body {
    text-align: center;
}

#caja_principal {
    width: auto;
    margin: auto;
    text-align: left;
}

#cabecera {
    background: #FFFBB9;
    border: 1px solid #999999;
    padding: 50px;
}

#menu {
    background: rgb(50,50,50);
    padding: 5px 15px;
}

#menu li {
    display: inline-block;
    list-style: none;
    padding: 15px;
    font: bold 16px QwarsSans, sans-serif;
    color: #FFFFFF;
}

#area_principal {
    float: left;
    width: 660px;
    margin: 20px;
}

#barra_lateral {
    float: left;
    width: 220px;
    margin: 20px 0px;
    padding: 20px;
    background: #CCCCCC;
}

#pie {
    clear: both;
    text-align: center;
    padding: 20px;
    border-top: 2px solid #999999;

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
   
    <meta name="description" content="Ejemplo de HTML5">
    <meta name="keywords" content="HTML5, CSS3, JavaScript">
   
    <title>
        Documento de prácticas
    </title>
    <link rel="stylesheet" href="misestilos.css">
    <link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/qwarssans" rel="stylesheet" type="text/css"/>

</head>
<body>
    <div id="caja_principal">
        <header id="cabecera">
            <h1>Título prinacipal del sitio</h1>
        </header>
        <nav id="menu">
            <ul>
                <li>Inicio</li>
                <li>Imágenes</li>
                <li>Vídeos</li>
                <li>Contacto</li>
            </ul>
        </nav>
        <section id="área_principal">
            <article>
                <header>
                    <hgroup>
                        <h1>Título de la primera entrada</h1>
                        <h2>Subtítulo de la primera entrada</h2>
                    </hgroup>
                    <time datetime="13-07-2014" pubdate>Publicado el 13-01-2014</time>
                </header>
                Este es el texto de la primera entrada.
                <figure>
                    <img src="http://minkbooks.com/content/myimage.jpg">
                    <figcaption>
                        Esta es la imagen de mi primera entrada
                    </figcaption>
                </figure>
                <footer>
                    <p>Comentarios (0)</p>
                </footer>
            </article>
            <article>
                <header>
                    <hgroup>
                        <h1>Título de la segunda entrada</h1>
                        <h2>Subtítulo de la segunda entrada</h2>
                    </hgroup>
                    <time datetime="13-07-2014" pubdate>Publicado el 13-01-2014</time>
                </header>
                Este es el texto de la segunda entrada.
                <figure>
                    <img src="http://minkbooks.com/content/myimage.jpg">
                    <figcaption>
                        Esta es la imagen de mi segunda entrada
                    </figcaption>
                </figure>
                <footer>
                    <p>Comentarios (0)</p>
                </footer>
            </article>
        </section>
        <aside id="barra_lateral">
            <blockquote>Cita del Artículo 1</blockquote>
            <blockquote>Cita del Artículo 2</blockquote>
        </aside>
        <footer id="pie">
            Copyright &copy 2014
        </footer>
    </div>
</body>
</html>
Ya ves tu cuando te lo diga, te va a dar algo.

Puedes usar el inspector de elementos (boton derecho inspeccionar elemento).

Al lio.
Has escrito.

<section id="área_principal">

La palabra area esta acentuada, si cambias esto:
<section id="área_principal">

por esto.

<section id="area_principal">

El footer flota a la izquierda.
la dura vida del programador [+furioso] XD XD XD XD
Jajaja, menudo fallo más tonto xD

Gracias a todos por la ayuda :p
Crear objetos flotantes no es la mejor solución para ese problema, pues estos pueden desubicarse cuando aplicas zoom entre otros. Igualmente con el uso de valores fijos para los tamaños de los objetos y las fuentes, te recomiendo usar porcentajes.

En mi caso te lo plantearía asi:

<style>
.contenedor{
font-size: 0px;
width:100%
}

.wrapper{
padding:20px;
font-size:13px;
}

.principal {
display:inline-block;
  width: 75%;
vertical-align:top;
}
.lateral {
display:inline-block;
  width: 25%;
vertical-align:top;
}
</style>
<body>
  <div class="contenedor">
    <section class="principal"><div class="wrapper"> Mi contenido </div></section>
    <aside class="lateral"><div class="wrapper"> Mi contenido </div></aside>
  </div>
</body>
Era para un ejercicio, pero me quedo con el consejo que me das ;)
11 respuestas
Archivado
Volver a General