Geek Answers Handbook

Left and right divs attached to the middle div

I am trying to set the auto width for the left and right divs so that they always snap to the centered div. In my example below, width: 20%; used width: 20%; for the left and right div, which should be dynamic. How can i do this?

I looked at these ( 1 , 2 , 3 ) example for ideas, but could not solve my problem. 3rd is what I want, but it does not work in all browsers.

Feel free to modify the whole code below as I am open to better solutions, but the center of the div should be 850 pixels.

thanks

 <style> body { background: #333333; } * { margin: 0; padding: 0; } #cover { float: left; width: 100%; height: 200px; background: #bababa; } #left { float: left; width: 20%; height: 200px; background: #cccccc; } #center { float: left; width: 850px; /*compulsory*/ height: 200px; background: #dddddd; } #right { float: right; width: 20%; height: 200px; background: #eeeeee; } </style> <div id="cover"> <div id="left">LEFT</div> <div id="center">CENTER</div> <div id="right">RIGHT</div> </div>
+4
source share
4 answers

If you really want to stick with 850px for the middle, you will have to calculate the width of the entire document this way using a little javascript: Fiddle

Here is the main part of javascript.

 function menuresize(){ var windowWidth = document.body.offsetWidth; var menusSize = (windowWidth-850)/2; if(menusSize<1){ document.querySelector('#left').style.display = 'none'; document.querySelector('#right').style.display = 'none'; }else{ document.querySelector('#left').style.width = menusSize+'px'; document.querySelector('#right').style.width = menusSize+'px'; document.querySelector('#left').style.display = 'block'; document.querySelector('#right').style.display = 'block'; } } menuresize(); window.onresize = function(e){menuresize();}

If the page is thinner or equal to 850px , the left and right menus disappear.

0
source

Here is a working demo

CSS

 body { background: #333333; } * { margin: 0; padding: 0; } #cover { float: left; width: 100%; min-width:1420px; height: 200px; background: #bababa; } #left { float: left; width: 20%; height: 200px; background: #cccccc; left:0 } #center { float: left; min-width:850px; width: 60%; height: 200px; background: #dddddd; } #right { float: right; width: 20%; height: 200px; background: #eeeeee; right:0 }
0
source

Add the width to the center of the div as a percentage, e.g.

  <style> body { background: #333333; } * { margin: 0; padding: 0; } #cover { float: left; width: 100%; height: 200px; background: #bababa; } #left { float: left; width: auto; height: 200px; background: #cccccc; } #center { float: left; width: 850px; /*compulsory*/ height: 200px; background: #dddddd; } #right { float: left; width: auto; height: 200px; background: #eeeeee; } </style> <div id="cover"> <div id="left">LEFT</div> <div id="center">CENTER</div> <div id="right">RIGHT</div> </div>
0
source

see @Ence answer

now just add a new div inside the "center" div and apply the class:

 #middle{ width: 200px; background: #f90; margin:auto; }

Example: http://jsfiddle.net/vSvTZ/

0
source

More articles:


All Articles