CODEWITHSUNDEEP
cssgoogle-chromefirefoxcss-tables
horin
horin

Reputation: 1654

Firefox displaying table-cell incorrectly (chrome working good)

I am designing site layout which consists of few divs. Whole site is in container. Everything under logo is construct and then I have content which is wrapped in content-wrapper. Content-wrapper has 2 childs: sidebar-wrapper and main-wrapper. I want to desing a few things in main-wrapper but it is not displaying correctly in firefox. Both main and sidebar are set to display table-cell but if I add img with text on right to main-wrapper then main-wrapper width changes and it is a bit wider then parent div (content wrapper). It happens in firefox and IE (chrome is working great). Here are some images shot with dev-tools enabled in firefox and chrome.

Chrome: enter image description here

Firefox: enter image description here

so is there any way to make table-cell fill parent width or to fix this problem somehow?

Upvotes: 3

Views: 11224

Answers (2)

Navas CA
Navas CA

Reputation: 11

Place the below line in table class

table-layout: fixed;

Upvotes: 1

Matt
Matt

Reputation: 2420

Have you tried table-layout:fixed; on your wrapper div (the one that specifies display: table;)?

I had a similar problem, this property forces the table to be a fixed width instead of determined by its contents. By default the table columns are set to the width of the widest cell (with breakable content) in the row, in your case the image, hence the second column being too big :)

More information on table-layout can be found here

Upvotes: 7

Related Questions