Problema con estilos

[Middrel]

Hola, buenas tardes...

Tengo un pequeño problema con unos estilos. Yo lo veo bien pero quizá se me está escapando algo. La idea es hacer una simple plantilla responsiva sin utilizar los media querys, al menos, no hasta cierto tamaño. Les explico:

Tengo una página con lo siguiente:

Código HTML:

<header></header>
<div id="wrapper">
      <div id="content">
            <section class="section-left"></section>
            <section class="section-center"></section>
            <section class="section-right"></section>
      </div>
</div>
<footer></footer>
 

donde header, footer, content y wrapper no tienen ningún problema. El problema lo tengo en section class="section-center" ya que no se va adaptando o reduciendo de acuerdo a las diferentes resoluciones. Mis estilos son los siguientes:

Código CSS:

html, body{
    background-color:#e6e7e8;   
    font-family:'Open Sans', serif;
    font-size:14px;
    height:100%;
    margin:0 auto; 
    padding:0;
    width:100%; }
 
header{
    background-color:#01283C;
    color:#fff;
    height:65px;
    min-width:1280px;
    width:100%; }
    
footer{ 
    background-color:#01283C;
    color:#fff;
    height:80px;
    min-width:1280px;   
    width:100%; }
 
#wrapper{ 
    height:100%;
    min-width:1280px;
    width:100%; }
    
#content{
    height:100%;
    min-width:1280px;
    width:100%; }
 
.section-left{
    background-color:#01283C;
    border-top:1px solid #5d5d5d;   
    float:left;
    height:100%;
    min-height:685px;
    width:190px; }
 
.section-right{
    background-color:#fff;
    border:1px solid #cecfd2;
    box-shadow: 3px 2px 10px #ccc;  
    float:left;
    height:calc(100% - 30px);
    margin:15px 0;
    min-height:685px;
    width:345px; }
    
.section-center{
    background-color:#fff;  
    border:1px solid #cecfd2;
    box-shadow: 3px 2px 10px #ccc; 
    float:left;
    height:calc(100% - 30px);
    min-height:685px;   
    min-width:693px;
    margin:15px;
    width:70%; }
 

section-left y section-right tienen tamaños fijos, no quiero que cambien de tamaño. section-center es el que quiero que se vaya adaptando, pero al momento de ver el resultado, section-right es empujado y pasado hacia abajo. Las resoluciones con las que estoy trabajando son 1960, 1680, 1600, 1440, 1366 y 1280 como la más baja. En todas estas deberían entrar bien las secciones sin necesidad de media querys.

Quizá es una tontería lo que se me está pasando, pero no lo localizo...

¿Alguna idea?

Saludos!!

[Ito79]

Hola,
El problema que tienes es que la sección central tienes un ancho en %, por lo que cuando se reduce la pantalla, como la izquierda tiene un ancho fijo, la central "ya no cabe", el 60% más los PX de la izquierda son mayores que lo q entra en la pantalla, y por tanto la siguiente sección, la derecha se va abajo.

Para solucionarlo puedes poner el ancho de la sección central a un porcentaje restando lo que ocupa la izquierda más márgenes, por ejemplo algo así:

Código CSS:

.section-center{
    ...
    width: calc(100% - 650px);
    ...
}
 

Espero que te ayude, un saludo
Ito

[mpozo]

Usa flexbox, te lo hará más sencillo http://es.learnlayout.com/flexbox.html

[Middrel]

Hola Ito79! gracias por responder!

Tienes razón, no estaba restando la columna izquierda... no sé en que pensaba u.u

con ello se solucionó ese problema, agradezco por la ayuda.

mpozo he estado viendo un poco el tema de flexbox y no he tenido oportunidad de implementarlo pero como estoy haciendo un proyecto nuevo me daré ese tiempo para verlo más a fondo :)

Gracias por sus comentarios!!