html - Hiding DIV from left size while resizing browser window -

html - Hiding DIV from left size while resizing browser window -

is there possibility hide div left side when resizing browser window?

i'm trying because of right displaying ad, illustration here jsfiddle.net/h3b8g.

html:

<div id="wrapper"> <div id="left"><img src="http://s11.postimg.org/a1hfwxgs3/left_428x600.jpg" /></div> <div id="right"><img src="http://s1.postimg.org/tn5copctb/right_428x600.jpg" /></div> <div id="center"> <div id="top"><object type="application/x-shockwave-flash" data="http://www.swfcabin.com/swf-files/1403808655.swf?clickthru=http://goo.gl/dkvoyd" width="1000px" height="100px"></object></div> <p>lorem ipsum dolor sit down amet, consectetur adipisicing elit. voluptates consectetur veritatis fugit aspernatur quo repellendus corrupti perferendis inventore dignissimos sapiente ea ullam libero consequatur voluptatibus quam sint deleniti dolor illo molestias numquam ex iusto incidunt quidem.</p> </div> </div>

css:

#wrapper { position: relative; } #left { position: fixed; left: 0; top: 0; width: 50%; padding-right: 500px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: right; } #right { position: fixed; right: 0; top: 0; width: 50%; padding-left: 500px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #center { position: relative; display: block; margin: -8px auto 0px auto; width: 1000px; background: black; height: 2500px; } #top { background: blue; width: 100%; height: 100px; }

or there layout solution this?

how work you? my fiddle

here did. need encompass float element responsive. there other ways give fluidity much effort.

here css:

#outterwrapper { width:100%; float:left; overflow:hidden; } #wrapper { width:80%; float:left; } #right, #left { position:relative; width:20%; } #left { float:left; } #left img { width:auto; position:absolute; top:0px; right:0px; border-right:#000 5px solid; } #right img { position:absolute; top:0px; left:0px; border-left:#000 5px solid; } #right { float:right; } #center { width:80%; min-height:800px; float:right; background: black; } #center p { text-align : center; color:#fff; } #top { width:100%; float:left; } #top object { width: 100%; height: 100px; }

here html

div id="outterwrapper"> <div id="wrapper"> <div id="left"> <img src="http://s11.postimg.org/a1hfwxgs3/left_428x600.jpg" /> </div> <div id="center"> <div id="top"> <object type="application/x-shockwave-flash" data="http://www.swfcabin.com/swf-files/1403808655.swf?clickthru=http://goo.gl/dkvoyd"></object> </div> <p>in place need have enought content or set min-height.</p> </div> </div> <div id="right"> <img src="http://s1.postimg.org/tn5copctb/right_428x600.jpg" /> </div> </div>

html css layout