child div wider than parent div and overlaping it without body horizontal scrolling, parent width = 100%

Question

I cannot figure out how to achieve it after hours of searching and trying.

I need the document body to be with no scrolls, neither horizontally nor verically. So the following CSS lines do the trick:

body
{
height:100%;
width:100%;
}

The markup inside body tag is:

<div id="content">
    <div id="left_container"></div>
    <div id="center_container"></div>
    <div id="right_container"></div>    
</div>
<div id="footer">
    <a href="javascript:void(0);">
         move to left
    </a>
    <a href="javascript:void(0);" >
         move to right
    </a>
</div>

Additional details:

• div#footer height + div#content height = 100% . So I am using:

 #content { height: calc( 100% - 60px); } #footer { height: 60px; } 

• div#left_container width + div#center_container width = 100% AND div#center_container width + div#right_container width = 100%:

 #left_container { width:300px; height:100%; float:left; } #right_container { width:300px; height:100%; float:left; } #center_container { width: calc(100% - 300px); height:100%; float:left; } 

What I need is that the div#content to be of 100% + 300px without creating a horizontal scroll of the whole page, to be overlapping (physically but not the eyes) the body space and to be "slidable" horizontally using the jQuery.animate() , so that it allows showing only left_container and center_container OR center_container and right_container at a given moment. The anchors in the footer are responsible of triggering the animation between the two situations.

I hope the following figure is illustrating my target:

Thank you for your usual time and help.

Answer 1

As @Paulie_D said you can use overflow hidden

html {
  box-sizing: border-box;
  height:100vh;
  width:100vw;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body
{
  height:100%;
  width:100%;
  margin: 0;
  overflow:hidden
}

here is a demo hover the id #content to see it in action

 html { box-sizing: border-box; height:100vh; width:100vw; } *, *:before, *:after { box-sizing: inherit; } body { height:100%; width:100%; margin: 0; overflow:hidden } html { box-sizing: border-box; height:100vh; width:100vw; } *, *:before, *:after { box-sizing: inherit; } body { height:100%; width:100%; overflow:hidden } #left_container{ background: #8DF5F5 } #center_container { width: calc(100vw - 300px); background: #99D9EA } #right_container { background: #7092BE; } #content { position:relative; width: calc(100% + 300px); height: calc( 100% - 60px); transition: transform 1s } #content:hover{ transform:translateX(-300px) } #left_container,#right_container { width:300px; } #left_container,#right_container,#center_container { height:100%; float:left; } #footer { height: 60px; } 

 <div id="content"> <div id="left_container"></div> <div id="center_container"></div> <div id="right_container"></div> </div> <div id="footer"> <a href="javascript:void(0);"> move to left </a> <a href="javascript:void(0);" > move to right </a> </div> 

Here is an other demo using classList

 var content, slideLeft, slideRight; function addClassToContent(){ content.classList.add("activated") } function removeClassToContent(){ content.classList.remove("activated") } content = document.querySelector("#content"); slideLeft = document.querySelector(".slideLeft"); slideRight = document.querySelector(".slideRight"); slideLeft.addEventListener("click", addClassToContent,false); slideRight.addEventListener("click", removeClassToContent,false) 

 html { box-sizing: border-box; height:100vh; width:100vw; } *, *:before, *:after { box-sizing: inherit; } body { height:100%; width:100%; margin: 0; overflow:hidden } html { box-sizing: border-box; height:100vh; width:100vw; } *, *:before, *:after { box-sizing: inherit; } body { height:100%; width:100%; overflow:hidden } #left_container{ background: #8DF5F5 } #center_container { width: calc(100vw - 300px); background: #99D9EA } #right_container { background: #7092BE; } #content { position:relative; width: calc(100% + 300px); height: calc( 100% - 60px); transition: transform 1s } #content.activated{ transform:translateX(-300px) } #left_container,#right_container { width:300px; } #left_container,#right_container,#center_container { height:100%; float:left; } #footer { height: 60px; } 

 <div id=content> <div id=left_container></div> <div id=center_container></div> <div id=right_container></div> </div> <div id=footer> <a class=slideLeft> move to left </a> <a class=slideRight > move to right </a> </div> 

Answer 2

if you want slide,

set #content { width: calc(100% + 300px)}

and body {overflow: hidden}

then animate using jquery