Home/ Questions/Q 8896435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T00:02:59+00:00

I’m pretty proficient in CSS and HTML but I just can wrap my head

  • 0

I’m pretty proficient in CSS and HTML but I just can wrap my head around how this will work correctly.

I want to have a width of 990px for the container but i have about 1237px width of due to added shadows to the left and right

ive got it positioned but i want the overflow to be hidden until 990px width…

is there a way to make this happen?? here is my current code.

CSS:

body, html {margin:0; padding:0;}
body {background:url(../images/bg-x.jpg) top center repeat-x; background-color:#000;}
#main-wraper { } 
#main-container {margin:0 auto; width:990px; background:url(../images/container-bg.jpg) no-repeat; height:660px;}
#main-left {background:url(../images/bg-left.jpg) left center no-repeat;}
#main-right {background:url(../images/bg-right.jpg) right center no-repeat;}
#shadows {width:1237px; margin:0 auto; overflow-x: hidden}

html:

<body> 
  <div id="shadows">
    <div id="main-left">
      <div id="main-right">
        <div id="main-wraper"> 
          <div id="main-wraper-liner">
            <div id="main-container">
              <div id="main-container-liner">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Here is the link

http://hithouse.businesscatalyst.com/index.html

thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I got you right, you don’t want the shadow to be displayed, when the screen is smaller than 990px. What I would do is this:

    • leave the body as it is
    • create a transparent png with a height of 1px and a width of 990px + shadows (left and right)
    • use this much simpler markup
    • you’re ready to go

    HTML

    <div class="content">
    <div class="shadow"></div>
    <h1>Normal content goes here</h1>
</div>​

    CSS

    html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div.content {
    position: relative;
    width: 400px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid red;
}

div.shadow {
    position: absolute;
    top: 0;
    left: -28px;
    width: 456px;
    height: 100%;
    background: transparent url(https://dl.dropbox.com/u/1336931/_Stackoverflow/example_shadow.png) repeat-y 0 0;
}​

    DEMO

    Try before buy

    • 0