Duda con posicionamiento absolute en rejilla de bootstrap

[JustinKO]

Hola pzin, muchas gracias por tu respuesta. La verdad que no me ha quedado claro del todo lo que me explicas, de todos modos partiendo de lo que me decías he seguido trasteando y al final he dado con el porqué. Sigo sin entender la base pero si he pillado la solución.

Voy a explicarlo:

Respecto al funcionamiento de bootstrap no es más que las clases .col-md-7 y .col-md-5 tienen una flotación a la izquierda y un porcentaje dependiendo del ancho:

Código CSS:

.col-md-7, .col-md-5{
float: left;
}
.col-md-7 {
    width: 58.3333%;
}
.col-md-5 {
    width: 41.6667%;
}
 

Y dicho esto;
He comprobado que cuando me varía el ancho es porque varía el contenido del interior de los divs con las clases en cuestión (.col-md-7 y .col-md-5).

Al parecer cuando le doy position:absolute el ancho del contenedor deja de tener el ancho del 100% y da un ancho dependiendo de los contenidos de los divs que tiene dentro.
Entonces los divs internos son calculados a un 58.3333% y un 41.6667% del div contenedor (.caja_seccion ). Por lo que será diferente dependiendo del ancho de éste.

Resumiendo: He dado forzado ancho fijo al div contenedor .caja_seccion (with: 100%) y se ha solucionado el problema.


Repito el código para con modificaciones para que se entienda mejor.

Código HTML:

<!--menu tabs-->
  <ul class="nav nav-tabs">
        <li class="active"><a href="#">Descripción</a></li>
        <li ><a href="#">Más información</a></li>     
      </ul>
      
      
   <div id="cabecera_seccion">
   
    <!--************Este es el div que me aparece más ancho-->   
    <!--contenedor descripcion-->   
          
         <div  class="visible caja_seccion">
            
                  <div  class="col-md-7">
                  
                    CONTENIDO 7 COLUMNAS - El contenido de este div de 7 columndas es más largo. 
                    </div>
                  
                  <div class="col-md-5">
                    CONTENIDO 5 COLUMNAS
                  </div>
            
         </div>              
          
          
          <!--************Este es el div que me aparece más estrecho-->   
         <!--contenedor más informacion--> 
               
         <div class="oculta caja_seccion"> 
            
                  <div  class="col-md-7">       
                    CONTENIDO 7 COLUMNAS .  más corto  
                    </div>
                  
                  <div class="imagen_seccion col-md-5">
                    CONTENIDO 5 COLUMNAS
                    </div>
            
         </div>
  </div>
 

Código CSS:

.col-md-7, .col-md-5{
float: left;
}
.col-md-7 {
    width: 58.3333%;
}
 
.col-md-7, .col-md-5{
    float:left;
}
 
 
 
#cabecera_seccion{  
    position: relative; 
       width: 100%;
}
.caja_seccion{
    position: absolute;
    top: 0px;
 
    width: 100%; /*Este es el ancho que he tenido que forzar para que funcione*/
    
 
}
 
 
.caja_seccion.visible{
    visibility: hidden;
}
.caja_seccion.oculta{
    visibility: visible;
}
 

saludos y muchas gracias ;)