CSS - ¿Por que salta el DIV?

 
Vista:
sin imagen de perfil

¿Por que salta el DIV?

Publicado por José (1 intervención) el 15/01/2017 11:44:01
Buenas. Se que esto es de parvulario de CSS, pero no entiendo porque el 2º DIV salta de carro.
CSS:
1
2
3
4
.contenedor { border: 3px solid green; width: 90%; margin: 10px auto; overflow: auto; }
.barra { border: 2px solid; font-family: Verdana; clear: both; }
.principal { border: 2px solid; float: left; width: 75%; padding: .5em;}
.lateral { border: 2px solid; float: left; width: 25%; padding: .5em; }

HTML:
1
2
3
4
5
6
7
8
9
10
11
<div class="contenedor">
    <div class="barra">
        patata
    </div>
    <div class="principal">
        brava
    </div>
    <div class="lateral">
        alioli
    </div>
</div>

El problema que tengo es que el DIV lateral salta de línea y por lo que entiendo, debería quedarse en línea, puesto que no supera el 100% no?

Un saludo y gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

¿Por que salta el DIV?

Publicado por xve (490 intervenciones) el 15/01/2017 19:05:59
Hola José, ten en cuenta, que los bordes, también ocupan espacio... el 75% mas un borde de dos pixels, es mas del 75% por eso no te cabe.

Añade este estilo para que el borde se ponga dentro del width:
1
.contenedor>div {box-sizing:border-box;}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar