Foros del Web - Ver Mensaje Individual

madman_18 · #1 (**permalink**) 17/04/2013, 09:43

Hola a todos!

No sé si este post iría aquí o en otra sección pero bueno...

Buscando inspiración para una web que me ha surgido, me ha gustado mucho la idea de cómo muestra el contenido esta página : incub.ro, mirando el código veo que tiene sencillamente un bloque contenedor al 100% de tamaño y los bloques que tienen el contenido flotando a la izquierda.....sin embargo no consigo que me queden los bloques situados de la misma forma.... os pongo el código por si me podéis echar una mano

HTML:

Código HTML:

Ver original<body>              
        
        <header class="cabecera">
            <article id="logo"> aqui va el logo</article>
            <nav class="mi-menu">
                <ul>
                    <li><a href="#primero">primero</a></li>
                    <li><a href="#segundo">segundo</a></li>
                    <li><a href="#tercero">tercero</a></li>
                </ul>
            </nav>
        </header> 
        
        <section class="contenedor">
            <article class="bloque-contenido" id="primero">        
        Curabitur tristique laoreet tincidunt. Sed malesuada interdum enim non tincidunt. Maecenas tincidunt erat at nulla consequat feugiat. In urna nisl, accumsan at adipiscing eget, pharetra quis eros. Mauris a diam ut diam luctus lobortis vel in elit. Morbi pharetra nibh sit amet enim dictum cursus. Quisque ullamcorper, metus vitae lobortis ultrices, eros metus dignissim diam, et lobortis orci est a felis. Morbi in dolor nunc, a bibendum quam. Donec odio leo, porta et posuere non, laoreet quis sem. Mauris nec porta urna. Nam in viverra leo. Morbi at scelerisque eros.
            </article>
            <article class="bloque-contenido" id="segundo">
        Curabitur tristique laoreet tincidunt. Sed malesuada interdum enim non tincidunt. Maecenas tincidunt erat at nulla consequat feugiat. In urna nisl, accumsan at adipiscing eget, pharetra quis eros. Mauris a diam ut diam luctus lobortis vel in elit. Morbi pharetra nibh sit amet enim dictum cursus. Quisque ullamcorper, metus vitae lobortis ultrices, eros metus dignissim diam, et lobortis orci est a felis. Morbi in dolor nunc, a bibendum quam. Donec odio leo, porta et posuere non, laoreet quis sem. Mauris nec porta urna. Nam in viverra leo. Morbi at scelerisque eros.
            </article>
            <article class="bloque-contenido" id="tercero">
        Curabitur tristique laoreet tincidunt. Sed malesuada interdum enim non tincidunt. Maecenas tincidunt erat at nulla consequat feugiat. In urna nisl, accumsan at adipiscing eget, pharetra quis eros. Mauris a diam ut diam luctus lobortis vel in elit. Morbi pharetra nibh sit amet enim dictum cursus. Quisque ullamcorper, metus vitae lobortis ultrices, eros metus dignissim diam, et lobortis orci est a felis. Morbi in dolor nunc, a bibendum quam. Donec odio leo, porta et posuere non, laoreet quis sem. Mauris nec porta urna. Nam in viverra leo. Morbi at scelerisque eros.
            </article>
        </section>
    </body>

Código CSS:

Ver originalbody,html{font-family: 'Economica', sans-serif;background: #EAE9E9;}
body{ overflow-x: hidden;overflow-y: auto;width: 100%;}
.cabecera{width:100%;height:auto;background: #FFF;padding: 10px 0 5px 0;}
    #logo{width: 423px;height:85px;/*background:url('img/logo.png') no-repeat;*/margin: 0px auto;text-align:center;}
    .mi-menu{width:960px;height:auto;margin: 0 auto;text-align: center;font-size: 16pt;}
    .mi-menu ul li{display: inline-block;padding-right: 20px;}
    .mi-menu ul li:last-child{padding-right: 0px;}
.contenedor{width:100%;}
.bloque-contenido{width:100%;margin: 0 auto;float:left;}

Gracias de antemano!