CODEWITHSUNDEEP
css
Apalabrados
Apalabrados

Reputation: 1146

CSS Three columns header

I have the following issue related to a three columns header.

I need that the middle column be 960px width and centered. When document width is higher that 960px, other div columns come up and its width will depends on the exceded width.

Here is an image http://www.vanara.es/stack/Header-layout.png

The sideblocks of the header will contain a background-color, on the right one, and an image repeated-x on the left one.

EDIT: it should be IE9/8/7 compatible.

http://jsfiddle.net/j6ReH/1/

<div class="wrapper">
    <div class="left"></div>
    <div class="central"></div>
    <div class="right"></div>
</div>

.wrapper {
    width:100%;
    height:50px;
}
.central {
    width:960px;
    height:50px
    margin:0 auto;
    float:none;
    background-color:#CCCCCC;
}
.left {
    width:auto;
    height:50px
    float:none;
    background-color:#ABC123;
}
.right {
    width:auto;
    height:50px
    float:none;
    background-color:#123456;
}

Upvotes: 2

Views: 9594

Answers (3)

Andrea Ligios
Andrea Ligios

Reputation: 50261

Simply apply display: table; to the wrapper and display: table-cell; to the children.

Demo: http://jsfiddle.net/j6ReH/2/

HTML

<div class="wrapper">
    <div class="left"></div>
    <div class="central"></div>
    <div class="right"></div>
</div>

CSS

.wrapper {
    width:100%;
    height:50px;
    display: table;
}
.central {
    width:360px;
    height:50px;
    background-color:#CCCCCC;
    display: table-cell;
}
.left, .right {
    height:50px;        
    display: table-cell;
    background-color:#ABC123;
}
.right {
    background-color:#123456;
}

Note

It is > IE7 compatible, for IE6 and IE7 you may want to take a look at this workaround: http://tanalin.com/en/projects/display-table-htc/

Upvotes: 3

Chris par
Chris par

Reputation: 65

You could do it by setting the body to one color

Then setting your middle div to width 960px with margins auto then on the right

You could use something like 

    @media only screen and (max-width: 960px)                            
    { 
    #yourrightdiv { 
    display: none; 
} 
}

Upvotes: 0

Aman Chhabra
Aman Chhabra

Reputation: 3894

You can put the center part in a div with css "margin: 0 auto;float:none;width:960px;" and the remaining two columns with "width:auto;" According to me it will work in this case.

Upvotes: 0

Related Questions