I'm having a bit of a problem. I'm using FireFox 3.6 and have the following DOM structure:
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">Name</div>
</div>
And the following CSS:
.view-row {
width:100%;
display:table-row;
}
.view-name {
display: table-cell;
float:right;
}
.view-type {
display: table-cell;
}
If I take off the display:table-row it will appear correctly, with the view-row showing a width of 100%. If I put it back it shrinks down. I've put this up on JS Bin:
What's going on?
This question is related to
css
Tested answer:
In the .view-row css, change:
display:table-row;
to:
display:table
and get rid of "float". Everything will work as expected.
As it has been suggested in the comments, there is no need for a wrapping table. CSS allows for omitting levels of the tree structure (in this case rows) that are implicit. The reason your code doesn't work is that "width" can only be interpreted at the table level, not at the table-row level. When you have a "table" and then "table-cell"s directly underneath, they're implicitly interpreted as sitting in a row.
Working example:
<div class="view">
<div>Type</div>
<div>Name</div>
</div>
with css:
.view {
width:100%;
display:table;
}
.view > div {
width:50%;
display: table-cell;
}
Note that according to the CSS3 spec, you do NOT have to wrap your layout in a table-style element. The browser will infer the existence of containing elements if they do not exist.
give on .view-type class float:left; or delete the float:right; of .view-name
edit: Wrap your div <div class="view-row"> with another div for example <div class="table">
and set the following css :
.table {
display:table;
width:100%;}
You have to use the table structure for correct results.
You can nest table-cell directly within table. You muslt have a table. Starting eith table-row does not work. Try it with this HTML:
<html>
<head>
<style type="text/css">
.table {
display: table;
width: 100%;
}
.tr {
display: table-row;
width: 100%;
}
.td {
display: table-cell;
}
</style>
</head>
<body>
<div class="table">
<div class="tr">
<div class="td">
X
</div>
<div class="td">
X
</div>
<div class="td">
X
</div>
</div>
</div>
<div class="tr">
<div class="td">
X
</div>
<div class="td">
X
</div>
<div class="td">
X
</div>
</div>
<div class="table">
<div class="td">
X
</div>
<div class="td">
X
</div>
<div class="td">
X
</div>
</div>
</body>
</html>
Source: Stackoverflow.com