CODEWITHSUNDEEP
cssfirefoxcss-tables
Josh Unger
Josh Unger

Reputation: 7153

Width wrong when using display table-cell and floated element in FireFox

It appears that FireFox (17.0.1) is calculating the width incorrectly when using a display of table-cell and a floated element where it sets the parent width and doesn't include the width of the floated element in the parent width. This appears to work in Chrome, IE8, IE9, and IE10.

   <div style="position:absolute">
    <div style="position:relative">
        <div class="option">
            <div>
                <div class="right">right text</div>
                <div class="cell">content item 1</div>
            </div>
        </div>
        <div class="option">
             <div>
                 <div class="right">right</div>
                 <div class="cell">content</div>
             </div>
        </div>
    </div>
</div>
<style>
    .right {float:right;}
    .cell
    {
        display:table-cell;
        height:30px;
        vertical-align:middle;
        border:1px solid green
    }
</style>​

If possible, I'm looking for a CSS only fix since this is an existing. Some of the HTML might not make sense, but I've eliminated 90% to make the example cleaner.

I have noticed a couple of table-cell bugs where a display:table, display:table-row is required on some parent element... but I couldn't find a combination that works.

Also, I'm trying to avoid hard-coding a width.

Upvotes: 1

Views: 2141

Answers (1)

Riskbreaker
Riskbreaker

Reputation: 4791

Make your life easier by removing float: right; and adding display: table-row; on the container div:

http://jsfiddle.net/Riskbreaker/u9RU4/1/

I tested this in FF-Chrome-IE9 and IE8- and Safari for you. ......that is unless you need the float....

Upvotes: 2

Related Questions