Hello,

I took a extended break from coding my own designs and now I've forgotten a few important things. Maybe some awesome person will be able to help me out with very little effort!?

 

The address is:

 

http://www.spotya.co.nz/excelsior/

 

It's not even close to be finished but before I go too far I'd like to get this issue sorted.

 

What is happening is that my content div isn't resizing it's container div (parent I guess it's called). Now I know this has been raised many times but it seems everyones code is different when they hit this issue. Basically I have a container with the site background, then a div with the content background and a right hand sidebar which takes it's height off the content div. Phew, hope it makes sense!

 

The html code been minus the actual content used is:

 

<div id="content_wrap">
<div id="content">
<div id="main"></div>
<div id="side_bar"><div id="sidebar_top"></div><div id="sidebar_content">
<div id="sidebar_content_wrap">
</div>
</div>
</div>
</div>
</div>

 

and my css is:

 

#content_wrap {
background-image: url(../images/container_bckgrnd.png);
background-repeat: repeat;
width: 937px;
position: relative;
top: -5px;
height: 570px;
}
#bottom_image {
position: relative;
left: -15px;
top: -1px;
}

#content {
height: 100%;
width: 925px;
background-color: #FFFFFF;
border: thin solid #292f1f;
visibility: inherit;
position: relative;
}
#main {
height: auto;
width: 630px;
padding-top: 12px;
padding-bottom: 5px;
padding-left: 15px;
text-align: left;
position: absolute;
left: 0px;
padding-right: 30px;
z-index: auto;
}
#side_bar {
height: 100%;
width: 271px;
float: right;
overflow: visible;
position: relative;
top: -13px;
}
#sidebar_top {
background-image: url(../images/side_top.png);
background-repeat: no-repeat;
height: 17px;
width: 100%;
}
#sidebar_content {
background-image: url(../images/side_content.png);
background-repeat: repeat-y;
height: 100%;
width: 100%;
}
#sidebar_content_wrap {
width: 90%;
padding-top: 7px;
height: 100%;
}

 

I want the Content Wrap Div to resize automatically off it's containing div along with the sidebar resizing at the same time. I would appreciate anyones input as I can't think of the way I used to do this without even a sweat.

 

Regards

 

Damian

#content_wrap {
       background-image: url(../images/container_bckgrnd.png);
       background-repeat: repeat;
       width: 937px;
       position: relative;
       top: -5px;
       height: auto;
       display: block;
}

 

Let me know if that does the trick.

Thanks Empek for your help,

It didn't sort my problem, I think I've screwed things up with the div's inside of the main (content_wrap).

 

I appreciate your input though mate!

 

Regards

 

Damian

would overflow:hidden; solve it?

Hi mrchristoph,

Thanks for your suggestion, again no luck. I applied it to my div with the id 'content_wrap' with no luck.

 

I have the feeling to why I haven't sorted it myself is that it isn't just the container but the child div's which are not set properly.

 

Cheers for your help though!

 

Damian

It's because you're using absolute positioning on the <div id="main">.

 

It would take some surgery to fix this. If this is something you'd like to get fixed, shoot me a PM. If you have the time to play around with it, you have to remove the position absolute from that div, and redo the whole layout using floats and clearfix where needed.

 

Cheers!