Hello, I am creating a hybrid (fluid and fixed) css layout with 960.gs I can't get the div "header-center" to fill the space on the screen when the resolution is adjusted. "header-right" sticks to the right side, and "header-left" sticks to the left. I want the gap in between to be "filled" with "header-center".
Does anyone know how to accomplish this? IE 6 is not important.
Thanks!
Sorry about leaving the 960 css messy and separate..just trying to mock up.
HTML+CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#header {
display: inline;
}
#header-left {
display: inline;
}
#header-center {
display: inline;
}
#header-right {
clear: none;
display: inline;
float: right;
}
#content {
}
#content-left {
}
#content-center {
}
#content-right {
}
#footer {
}
</style>
<title></title>
<link rel="stylesheet" type="text/css" href="/960.css" />
</head>
<body>
<div id="header" class="container_12">
<div id="header-left" class="grid_3 ">
<div id="logo" class="grid_3 alpha omega">
</div>
</div>
<div id="header-center" class="grid_6 ">
</div>
<div id="header-right" class="grid_3 ">
</div>
</div>
<div id="content" class="container_12">
<div id="content-left" class="grid_2 ">
</div>
<div id="content-center" class="grid_8 ">
</div>
<div id="content-right" class="grid_2 ">
</div>
</div>
<div id="footer" class="container_12"></div>
</body>
</html>
CSS (960.gs)
/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
min-width: 0px;
margin-left: 0px;
margin-right: auto;
width: 960px;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {
margin-left: 0 !important;
}
.omega {
margin-right: 0 !important;
}
/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,.grid_12{
display:inline;
float: left;
position: relative;
margin-left: 10.0px;
margin-right: 10.0px;
}
/* Grid >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1{
width:60px;
}
.container_12 .grid_2{
width:140px;
}
.container_12 .grid_3{
width:220px;
}
.container_12 .grid_4{
width:300px;
}
.container_12 .grid_5{
width:380px;
}
.container_12 .grid_6{
width:440px
}
.container_12 .grid_7{
width:540px;
}
.container_12 .grid_8{
width:620px;
}
.container_12 .grid_9{
width:700px;
}
.container_12 .grid_10{
width:780px;
}
.container_12 .grid_11{
width:860px;
}
.container_12 .grid_12{
width:940px;
}
/* Prefix Extra Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 {
padding-left:80px;
}
.container_12 .prefix_2 {
padding-left:160px;
}
.container_12 .prefix_3 {
padding-left:240px;
}
.container_12 .prefix_4 {
padding-left:320px;
}
.container_12 .prefix_5 {
padding-left:400px;
}
.container_12 .prefix_6 {
padding-left:480px;
}
.container_12 .prefix_7 {
padding-left:560px;
}
.container_12 .prefix_8 {
padding-left:640px;
}
.container_12 .prefix_9 {
padding-left:720px;
}
.container_12 .prefix_10 {
padding-left:800px;
}
.container_12 .prefix_11 {
padding-left:880px;
}
.container_12 .prefix_12 {
padding-left:960px;
}
/* Suffix Extra Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 {
padding-right:80px;
}
.container_12 .suffix_2 {
padding-right:160px;
}
.container_12 .suffix_3 {
padding-right:240px;
}
.container_12 .suffix_4 {
padding-right:320px;
}
.container_12 .suffix_5 {
padding-right:400px;
}
.container_12 .suffix_6 {
padding-right:480px;
}
.container_12 .suffix_7 {
padding-right:560px;
}
.container_12 .suffix_8 {
padding-right:640px;
}
.container_12 .suffix_9 {
padding-right:720px;
}
.container_12 .suffix_10 {
padding-right:800px;
}
.container_12 .suffix_11 {
padding-right:880px;
}
.container_12 .suffix_12 {
padding-right:960px;
}
/* Push Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .push_1 {
left:80px;
}
.container_12 .push_2 {
left:160px;
}
.container_12 .push_3 {
left:240px;
}
.container_12 .push_4 {
left:320px;
}
.container_12 .push_5 {
left:400px;
}
.container_12 .push_6 {
left:480px;
}
.container_12 .push_7 {
left:560px;
}
.container_12 .push_8 {
left:640px;
}
.container_12 .push_9 {
left:720px;
}
.container_12 .push_10 {
left:800px;
}
.container_12 .push_11 {
left:880px;
}
.container_12 .push_12 {
left:960px;
}
/* Pull Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1 {
right:80px;
}
.container_12 .pull_2 {
right:160px;
}
.container_12 .pull_3 {
right:240px;
}
.container_12 .pull_4 {
right:320px;
}
.container_12 .pull_5 {
right:400px;
}
.container_12 .pull_6 {
right:480px;
}
.container_12 .pull_7 {
right:560px;
}
.container_12 .pull_8 {
right:640px;
}
.container_12 .pull_9 {
right:720px;
}
.container_12 .pull_10 {
right:800px;
}
.container_12 .pull_11 {
right:880px;
}
.container_12 .pull_12 {
right:960px;
}
/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}