Problema con display: inline-block

ottojeanpierre · #1 (**permalink**) 10/04/2014, 14:46

Buenas Tardes,
espero me puedan ayudar, tengo un problema al querer colocar en un mismo nivel en la parte superior( luego del header), el article con id historia y el figure con id cochecito; con el atributo inline-block c/u, pero se posicionan una sobre otra como si fuese bloque.

Agradeceria infinitamente si apoyo, mil gracias.

Adjunto el código:
HTML

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
        <title>Empresa de Autos Toyota</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="normalize.css" />
        <link rel="stylesheet" href="estilos.css" />
        <script src="prefixfree.min.js"></script>
</head>
<body>
    <header>
        <hgroup>    
            <h1>Empresa de Autos Toyota</h1>
            <h2>Menos Gasolina, más HTML5</h2>
        </hgroup>
    </header>
    <section>
        <article id="historia">
            <p>bla bla bla</p>
        </article>
        <figure id="cochecito">
            <img src="crojo.jpg" />
            <figcaption>
                <h2>Empresa Toyota</h2>
                <ul>
                    <li><strong>Color:</strong>Blanco</li>
                    <li><strong>Techo:</strong>Mate</li>
                    <li><strong>Llantas:</strong>Barato</li>
                </ul>
            </figcaption>
        </figure>
    </section>
    <nav>
        <ul>
            <li><a href="#">Personalizar</a></li>
            <li><a href="#">Comprar</a></li>
            <li><a href="#">Contactar</a></li>
        </ul>
    </nav>
</body>
</html>

CSS

Código CSS:

Ver originalbody
{
    background: #222;
    color: #EEE;
    font-family: Arial;
    font-size: 16px;
    text-align: center;
}
 
header
{
    
    background:   url("lagonda.png") no-repeat 90% center,
            url("fondo.png");
 
    background-size: 200px ,100px 100px;
    /*Margen Exterior (4 atributos segun orden horario[Si es uno es para los 4])*/
    margin: 0 0 1em 0;
    /*Margen Interior (4 atributos segun orden horario[Si son 2 el primero es arriba y abajo, el segundo es derecha izquierda])*/
    /*em= Indica un valor de fuente por defecto en este caso del font-size del body (16 px) 
    y como es 2em = 2x16px= 32px*/
    padding: 0.5em 0;
    width: 100%;
}   
 
header h1
{
    margin: 0;
    /*sombra de texto (tres valores de rgb y el 4to es la transparencia)*/
    text-shadow: rgba(255,255,255, 0.5) 5px 5px 10px;
}
 
header h2
{
    margin: 0;
    /* Quita el negrita*/
    font-weight: normal;
    text-shadow: rgba(0,0,0,0.5) 2px 2px 3px;
}
 
#cochecito
{
    background: white;
    color: #222;
    text-align: left;
    width: 50%;
}
 
#cochecito figcaption
{
    margin: 1em;
}
 
#cochecito img
{
    /* La imagen se ajusta al figure y funciona para responsive design al agrandarla o achicarla*/
    width: 100%;
}
 
 
#cochecito , #historia
{
    display:inline-block;
    vertical-align: top;
}
 
 
#historia
{
    background: rgba(0,0,0,0.6);
    border-radius: 0.5em;
    box-shadow: rgba(0,0,0,0.5) 5px 5px 10px;
    /* Hacer 2 columnas = moz-column-count: 2;*/
    margin: 0 2% 1em 1em;
    padding: 1em;
    text-align: left;
    width: 35%;
}

MUCHAS GRACIAS.

andresgarciadev · #2 (**permalink**) 10/04/2014, 18:17

no entiendo... te refieres a que quieres que uno quede al costado de la otra? siendo ese el caso el problema seria con cochesito, dale un margin 0

ottojeanpierre · #3 (**permalink**) 10/04/2014, 18:38

Cita:

Iniciado por andresgarciadev

no entiendo... te refieres a que quieres que uno quede al costado de la otra? siendo ese el caso el problema seria con cochesito, dale un margin 0

Si precisamente eso era. Muchas gracias es error mío será ser porque las etiquetas tiene de por si un margen por default???