Question

im trying to get some background images around a content div. Thing is, the content div should have a flexible width (no problem). The background pics should always be left and right attached to the content div. BUT: the horizontal scrollbar should only be triggered, when the user reduces the window to the width of the content div.

Picture: Structure

I came up with something like this:

<div>
    <div class="header">/div>
 <div class="wrapper">  
     <div class="left"></div>
     <div class="right"></div>
     <div class="content">Content</div>
 </div>
    <div class="footer">/div>
</div>



.wrapper{
 margin:auto;
 width:950px;
position:relative;
}

.left {
background:transparent url(../images/left.png) no-repeat scroll 0 0;
position:absolute;
top:0;
left:-120px;
width:120px;
height:500px;
}

.right {
background:transparent url(../images/right.png) no-repeat scroll 0 0;
position:absolute;
top:0;
right:-120px;
width:120px;
height:500px; 
}

Scrollbars always appear when window hits the right absolute div. I need them to be two divs (left/right) because the content div should be flexible and not hide the background when it extends to much.

Someone got a tecnique for this?

Answer 1

you have an unnamed plain root container div.

Add this style for that div (or give a class/id name to wire css deceleration).
Main point is min-width… Keep it same with your container div’s width.

also adding body,html{margin:0;padding:0;} will be nicer.

style="width:100%;overflow:hidden;min-width:950px;position:relative; height:100px;"

this will work fine exept for ie6.
For ie, you can apply some js magic.

Let’s assume you’re using jquery library and you gave id name “shell” to your root container div.
Then try this script only for ie6. (create exclusion or something like that):

$(document).ready(function(){
 $('#shell').each(function(){
  var that = this;
  var contentWidth = 950;
  check();
  $(window).resize(check);
  function check() {
   var winWidth = Math.ceil($('body').width());
   if(winWidth <= contentWidth) {
    $(that).css({'width':contentWidth});
   } else {
    $(that).css({'width':'100%'});
   }
  }
 });
});

This script will make “shell”s width 100%. (if browser’s width is larger than 950px) otherwise it’ll lock shell’s width with 950px and that will enable scrollbar.