CODEWITHSUNDEEP
jqueryhtmlcss
workwise
workwise

Reputation: 1103

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?

Upvotes: 1

Views: 8222

Answers (2)

PradeepJangid
PradeepJangid

Reputation: 15

Change:

.dtable { display: table; width:100%; }    
.drow { display: table; width:100%; }

to:

.dtable { width:100%; }    
.drow {display:table;width:100%;}

Set drow class display as table and run it. It's working well.

Upvotes: 0

ivan.sim
ivan.sim

Reputation: 9288

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.)

Upvotes: 1

Related Questions