How to make div expand width 100% responsively?

Question

I have two div's (left, right). The content in the left div will be empty for some pages/requests; and I would like to hide the left div for such requests. When the left div is hidden/ removed, I want the right div to fill the entire page.

To achieve this is I'm using table-cell . It works but when I remove the left div the right div width changes from full page (100%) to content width.

HTML

<div id="main">
<div id="left">testjjj</div>
<div id="right">test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test test made in test made in test madein<br /></div>
</div>

CSS

#main{width:100%;border:1px solid red; position:relative }
#left {               
    display: table-cell;
    width:100px; 
    vertical-align:middle; 
    text-align:center;
    background:red
    }

#right {               
    display: table-cell;
    width:100%; 
    vertical-align:middle; 
    background:lightblue;
    text-align:left;

}

If you remove the left div, right div width is fixed to content width. Is there any other way instead of passing min-width to right div ?

• Here is a fiddle with 2 divs .
• Here is a fiddle with only the right div .

How to make right DIV width 100% irrespective to content?

Answer 1

Try this by adding display: table; :

#main{
width:100%;
border:1px solid red; 
position:relative;
display: table;
}
#left {               
    display: table-cell;
    width:100px; 
    vertical-align:middle; 
    text-align:center;
    background:red
    }

#right {               
    display: table-cell;
    width:100%; 
    vertical-align:middle; 
    background:lightblue;
    text-align:left;    
}

JSFIDDLE DEMO

Answer 2

add display:table to container

#main{width:100%;display:table;border:1px solid red; position:relative }

updated fiddle: http://jsfiddle.net/jgt07w7d/9/