javascript - How to make div expand width 100% responsively? -

javascript - How to make div expand width 100% responsively? -

i have 2 div's (left, right). content in left div empty pages/requests; , hide left div such requests. when left div hidden/ removed, want right div fill entire page.

to accomplish i'm using table-cell. works when remove left div right div width changes total page (100%) 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 remove left div, right div width fixed content width. there other way instead of passing min-width right div ?

here fiddle 2 divs. here fiddle right div.

how create right div width 100% irrespective content?

add display:table container

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

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

javascript jquery html css css3