CSS Three columns header

Question

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

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;
}

What compatibility do you need? IE9/8/7 ? Please specify this information in your question — Fabrizio Calderan, Apr 29 '13 at 11:18
Duplicate: http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally — Vimal Stan, Apr 29 '13 at 11:18
@VimalStan not really; that is a centered div with background on sides, this is a centered div with two other divs on sides... — Andrea Ligios, Apr 29 '13 at 11:42

score 3 · Accepted Answer · answered Apr 29 '13 at 11:39

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/

I saw the solution works fine in JSFiddle, but when implementing the same in my Header, it does not work at all. — Apalabrados, Apr 29 '13 at 17:19

score 0 · Answer 2 · answered Apr 29 '13 at 11:19

0

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.

answered Apr 29 '13 at 11:19

Aman Chhabra

3,824
1
23
39

`float:none` is not required. – Vimal Stan Apr 29 '13 at 11:23
Yes, but I used to write *{float:left;} in all my CSS so in that case it is required. – Aman Chhabra Apr 29 '13 at 11:26
1

why you should float left all elements? :| – Fabrizio Calderan Apr 29 '13 at 11:28
Using float left for all elements help me to easily design the page. Is it a bad practice to use float left for all elements? – Aman Chhabra Apr 29 '13 at 11:30
2

Just thinking you have to apply a lot of clearing and a lot of style to revert the style elements you don't need to float... – Fabrizio Calderan Apr 29 '13 at 11:38
Thanks I will try not to use float:left for all elements – Aman Chhabra Apr 29 '13 at 11:51

score 0 · Answer 3 · answered Apr 29 '13 at 11:27

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; 
} 
}

CSS Three columns header

3 Answers3