Geek Answers Handbook

CSS Cash Box in Chrome

I have a piece of code that works fine in IE and Firefox. It has 3 table cells inside the display: table; wrapper. The middle cell has a fixed width with an inverse image, and the left and right cells do not have a width and solid color. In firefox, etc. The left and right columns expand to fill the remaining space, since the table ... but in chrome these two cells have no width at all.

I need it to expand the left and right columns to fill the remaining space left and right of the center 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>
+1
source share
2 answers

Add table-layout: fixed; in #navbar .

This fixes the problem because:

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

In a fixed layout table algorithm, the width of each column is equal to as follows:

  • A column element with a value other than 'auto' for the width property specifies the width for this column.
  • Otherwise, the cell in the first row with a value other than "auto" for the width property determines the width for this column. If a cell spans more than one column, the width is divided into columns.
  • Any remaining columns equally divide the remaining horizontal table space (minus the borders or space between cells).
+3
source

Internet Explorer also had problems with an empty element.

Try the following:

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

More articles:


All Articles