CODEWITHSUNDEEP
htmlcss
eyal halperin
eyal halperin

Reputation: 121

using display:table-cell with position:fixed

I made one container <div>,and inside that one there are two <div>'s: one is width 80% and the other is 20% and need to be position:fixed.

For some reason the total width of the container <div> is longer then the browser window.

once I remove the position:fixed on the right <div> everything is in order but I do need that <div> to be position:fixed.

Here is my code:

HTML

<div class="test">
    <div class="leftSummary"></div>
    <div class="rightTasks"></div>
</div>

CSS

.test {
    width: 100%;
    display: table;
}
.leftSummary {
    width: 80%;
    display: table-cell;
}
.rightTasks {
    width: 20%;
    min-width: 275px;
    display: table-cell;
    vertical-align: top;
    position: fixed;
}

Upvotes: 1

Views: 4232

Answers (2)

Marc Audet
Marc Audet

Reputation: 46795

There is a basic issue here. Once you set position: fixed on .rightTasks, the display property is computed to block instead of table-cell.

This will change the layout accordingly and you need to rethink your markup.

Reference: http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Also, elements with position: fixed are positioned with respect to the view port, not the block element that contains them. Therefore, the 20% width is with respect to the view port and not the .test parent.

If you inspect the .rightTasks element, you will see that the width is 20% of the view port width and not 20% of the table width. If you set the table width to 50%, the effect is more apparent.

Upvotes: 4

Sinan AKYAZICI
Sinan AKYAZICI

Reputation: 3952

You shouldn't use min-width.

Live Demo

EDIT

If you want to use min-width with position: fixed , you should use top and right css. If you dont want to encounter issue that is by browser, you should use reset.css

Live Demo

Upvotes: 0

Related Questions