tags:

views:

37

answers:

1

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"&gt;
<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;
    }
A: 

This is just not going to work for you. You are overriding the float properties of the grid_X classes. What is the layout that you are trying to achieve? How are you intending to use 960gs?

Strelok