Question

I have a page that is rendered that has multiple divs, all at different widths (depending on the content). These divs can be toggled – meaning that I can display one div and hide the others after page render. So an example, I may have 4 divs, where the x’es dictate the div width:

xxxxxxx
xxx
xxxxx
x

The page renders and the body is the width of xxxxxxx. When I toggle the divs, the body width will take on the width of the div that is displayed.

I’m curious – Is it possible to fix the size of the body to ALWAYS be the size of xxxxxxx, even if I toggle the divs? So even though div xxx is displayed, the size is the width of xxxxxxx. Can this be done with jQuery?

Answer 1

Can be easily done with jQuery

$(document).ready(function(){
   $('body').width($('#div_xxxxx').width());
});