WorkWise WorkWise - 2 months ago 9
CSS Question

CSS display table cell width not working

I am trying to create a tabular structure with CSS, having relative widths.

CSS:

.dtable { display: table; width:100%; }
.drow { display: table-row; width:100%; }
.dcell { display: table-cell; }
#control_panel { width:100%; }
#left_nav { width:14%; padding: 1%; }
#chart_container { width:84%; padding:1%; }


HTML:

<div id='main_wrapper' class='dtable'>
<div id='control_panel_wrapper' class='drow'>
<div id='control_panel' class='dcell'>
</div>
</div>
<div id='bottom_wrapper' class='drow'>
<div id='left_nav' class='dcell'>&nbsp;</div>
<div id='chart_container' class='dcell'>&nbsp;</div>
</div>
</div>


Javascript Code before closing body tag:

<script>
$(document).ready(function() {
console.log($(window).width());
console.log($("#bottom_wrapper").width());
console.log($("#left_nav").width());
console.log($("#chart_container").width());
});
</script>


Output:

1356
1340
1282.2
3.2


Why is
left_nav
not getting 14% width of its parent, bottom_wrapper?

Answer

The key thing to remember about using display:table-cell is that it causes your div to behave like a td element. In your case, control_panel is assigned a width of 100%, causing the cell directly underneath it i.e. left_nav, to be stretched.

If I am not mistaken, you are trying to do colspan on your control_panel, right? Unfortunately, that is one of the limitation of display:table.

A workaround is to separate out your control_panel_wrapper and your bottom_wrapper into separate dtable. Take a look at this fiddle for live demo. (You can remove the border:1px solid gray; from dcell if you don't like the border.)

Comments