¿Cómo se selecciona la mitad del ancho restante usando css?

Question

Quiero tener tres columnas, una columna central de 1000 px centrada en la página y luego una columna a la izquierda y derecha que ocupa el ancho restante.

Básicamente quiero algo que se parece a esto:

cuando la capa esté 1000px y los dos espacios laterales son la mitad del espacio total restante.

Answer 1

Se puede centrar fácilmente un elemento con margin: 0px auto. Esto dejará un espacio a la izquierda y a la derecha del elemento. Si el elemento está dentro de otro que ocupa todo el ancho, se puede colocar un fondo y centrarlo en él.

Un ejemplo podría ser:

<div id="container"> 
    <div id="content"></div> 
</div> 

A continuación, el CSS se vería así:

#container { 
    width: 100%; 
    /* Background properties go here. */ 
} 

#content { 
    margin: 0px auto; 
    width: 1000px; 
} 

No sería posible poner contenido de cada lado de la div #content.

Answer 2

así que digamos que su "ancho de página" es de 1024 píxeles de ancho. Me gustaría hacer algo como esto -

html:

<div id="page_content"> 
    <div id="element_left"> 
    </div> 
    <div id="centered_element"> 
    </div> 
    <div id="element_right"> 
    </div> 
</div> 

css:

#page_content { width:1024px; margin:0px auto 0px auto;} 
#element_left { width:12px; float:left;} 
#element_right { width:12px; float:left;} 
#centered_element { width:1000px; margin:0px auto 0px auto; float:left;} 

Answer 3

Para un enfoque puro CSS, intentar algo así como http://jsfiddle.net/hKB9T/2/ (asegúrese de ampliar la ventana del navegador para que el cuadro "resultados" es ~ 1200 píxeles de ancho o menos)

que no está completa (en función de sus necesidades , puede que tenga que jugar con la posición del elemento .center), pero debería ponerlo en el camino correcto.

<div id="page"> 
    <div class="center">center column</div> 
    <div class="leftcol"> 
     <div class="inner">left column</div> 
    </div> 
    <div class="rightcol"> 
     <div class="inner">right column</div> 
    </div> 
</div> 

y

.leftcol, .rightcol { 
    width: 50%; 
    float: left; 
} 
.leftcol .inner { 
    margin-right: 500px; 
    height: 200px; 
} 
.rightcol .inner { 
    margin-left: 500px; 
    height: 200px; 
} 
.center { 
    width: 1000px; 
    margin: 0 auto -200px auto; 
    background-color: #eee; /* just for illustration */ 
}