CSS Relative positioning overflow (squashed div problem) divs height expand with content?

Question

Hi

I'm trying to edit some css to include a border to the right and the left of my site. My problem is that when I make my height 100% or auto nothing happens, but when I change the height it works, but I can't use this as I want it to change with the content.

I've noticed in expression web my sitegrinder div looks too squashed up the top instead of the full length of the content. Could this be due to positioning? Could overflow fix this somehow?

I have included the css and html below

  <div  id="sitegrinder">
    <div id="bgrepeat">
           <div id="id68logo"></div>
                  <div id="bglight"></div>
                        <div id="topbanner"></div>
                               <div id="id53light"></div>


#sitegrinder  {
left: auto;
top:auto;
width: 960px;
position: relative;
margin:auto;  }

I've also noticed that when I include overflow:hidden within the css all my content appears squashed at the top within this div.

Thanks for all your help

Regards Judi

Answer 1

if you want to make a horizontally centered div with a fixed with and graphics as left and right borders you should use something like this:

html:

<div id="wrapper">
    <div id="content">
        ...your content here...
    </div>
</div>

css:

#wrapper { width:980px; margin:0 auto;)
#content { margin:0 20; background transparen url(background_image.png) top center repeat-y; }

The background_image.png should be an image with 980px width. The 10 leftmost pixel.. and the 10 rightmost pixel are your border u can style the way you want.