Home/ Questions/Q 7535899
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T06:25:32+00:00

My main content area overlaps the header (sandy brown) and I am trying to

  • 0

My main content area overlaps the header (sandy brown) and I am trying to accomplish a drop shadow around the white content area.

I have four images that make up that content area: the top, the bottom, the part that tiles with the sandy brown background for 99px (notice the white space in the img) and the part that tiles the rest with the white background to match the background of the rest of the page.

The problem I am having is when I tile the background image that includes the sandy brown color and the background image that contains the white. As you can see in the image attached, I want the text to move up.

The way I have my html setup:

<div id="main-content">

 <div id="content-header"></div>
 <div id="content-header-tile"></div>
 <div id="content">

  <div id="content-body">
   <p>Text here</p>
  </div>

 </div>
</div>

I imagine along the way I could cut down on how many div’s I use

CSS for those div’s

#main-content {
margin-top:-120px;
margin-right:auto;
margin-left:auto;
height:500px;
width:960px;
background: url('..img/content_bg.png') repeat-y top left;
}

/* top of box, with drop shadow img */
#content-header {
height:11px;
background: #fff url('../img/content_header_bg.png') top left;
width:960px;
}

/* tiles bg img with same sandy brown color as the header above, for 99px */
#content-header-tile {
background: #fff url('../img/content_header_tile_bg.png') repeat-y top left;
width:960px;
height:99px;
}

/* begins tiling after 99px (after the div above is done tiling) */
#content {
background: #fff url('../img/content_white_tile_bg.png') repeat-y top left;
width:960px;
}

/* like #content-header, but this displays the bottom piece of the box */
#content-footer {
height:12px;
width:960px;
background: #fff url('../img/content_footer_bg.png') no-repeat top left;
}

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This rule:

      #main-content {margin-top:-120px;}

    Is what moves your white box ontop of the lighter top box, but doesn’t get you past the fact that you have two divs within #main-content (#content-header and #content-header-title) adding up to 120px in height.

    I believe this will get you closer:

    #content-body {margin-top:-120px;}

    Have you considered though, just using css box shadows?
    http://css-tricks.com/snippets/css/css-box-shadow/

    • 0