CODEWITHSUNDEEP
htmlcssgoogle-chrome
Glen
Glen

Reputation: 695

CSS Table Cell In Chrome

I have a piece of code that works fine in IE and Firefox. It has 3 table cells inside a display:table; wrapper. The middle cell has a fixed width with a backround image, and the left and right cells have no width and a solid colour. In firefox and ie the left and right columns expand to fill the remaining space, as a table would...but in chrome these two cells are showing no width at all.

I need it to expand the left and right columns to fill the remaining space on the left and right of the centre cell.

CSS

#navbar{
    width:100%;
    height:43px;
    border-bottom:2px solid #ffffff;    
    display:table;
}

#navbar #left{
    display:table-cell;
    background:#fcb316;
}

#navbar #middle{
    display:table-cell;
    width:1024px;
    height:43px;
    background:url(images/nav-bg.jpg) no-repeat;
}

#navbar #right{
    display:table-cell;
    background:#8cc63f;
}

HTML

<div id="navbar"> 
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

Upvotes: 1

Views: 4821

Answers (2)

thirtydot
thirtydot

Reputation: 228162

Add table-layout: fixed; to #navbar.

This fixes the problem because:

http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout

In the fixed table layout algorithm, the width of each column is determined as follows:

  1. A column element with a value other than 'auto' for the 'width' property sets the width for that column.
  2. Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.
  3. Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

Upvotes: 3

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

Internet Explorer also had problems with empty element.

Try this:

<div id="navbar"> 
    <div id="left">&nbsp;</div>
    <div id="middle">&nbsp;</div>
    <div id="right">&nbsp;</div>
</div>

Upvotes: 1

Related Questions