• Locked
4 replies [Last post]
Wed, 2009-09-23 03:54
Fluid
Offline
newbie
Australia
Last seen: 13 years 36 weeks ago
Australia
Joined: 2009-09-23
Posts: 2
Points: 0

Hey Everyone!

Hopefully an easy one for you all. I've looked at a heap of 100% layouts with header/footer, and each works in their own way. But none stretch my content div from header to footer. I'm using a background image in my content div, so I want it to stretch that full length, at the moment it's just wrapping itself.

http://www.techmonkeys.com.au

Currently, my basic structure is:

<div id="wrapper">
  <div id="header"></div>
  <div id="contentwrap">
    <div id="content"></div>
    <div id="contentpush"></div>
  </div>
</div>
<div id="footer"></div>

I've applied all the 100% codes to the wrapper div, offset the bottom margin by the height of the footer. The footer works fine! But as you can see on the website, the content div falls short.

Can anyone see why this might be? Or, direct me to the easy fix to this oh-so-common problem (I'm guessing?).

Thanks in advance!
Chris

Top
Tags:
Wed, 2009-09-23 06:34
#1
kilavasun
Offline
Regular
Brasil
Last seen: 13 years 36 weeks ago
Brasil
Timezone: GMT-3
Joined: 2009-03-23
Posts: 17
Points: 0

there's no way imo

Hi Fluid!

First of all, i must say that I'm not a CSS expert. With that said, here we go:

There's no way to resize the bg image to fit inside an element (at least not in the browsers-supported CSS 1, 2 and 3).

If you want to see your entire bg image, set the height to 768px (it's your bg image height). But I tought in a better way to do it. Look:

#contentwrap {
   background: transparent url(../images/bodybg.png) no-repeat center bottom;
   width: 960px;
   margin: 0 auto;
}
#footer {
   background: transparent url(../images/footerbg.png) no-repeat center top;
   color: #FBFBFB;
   height: 200px;
   text-align: center;
   width: 960px;
   margin: 0 auto;
}

There're some more adjusts I would do, but it's your design, not mine Tongue

Hope that this answer your question and helps you.

Later, kil.

Top
Wed, 2009-09-23 09:41
#2
Fluid
Offline
newbie
Australia
Last seen: 13 years 36 weeks ago
Australia
Joined: 2009-09-23
Posts: 2
Points: 0

Hey Kilavasun, thanks for

Hey Kilavasun, thanks for the reply!

Sorry if I wasn't clear, I'm not looking to resize the bg image, just make the whole div (#contentwrap) stretch all the way to the bottom of the page. Essentially the effect I'm trying to get is a sky meeting some grass.

I implemented your changes, but it didn't achieve what I was aiming for Sad

I know I could force it to be 768px, or even 1200px, but I don't want it to pop up scroll bars, I just want it to stick to the bottom no matter what size the window is.

Feel free to make design suggestions! It's pretty rough at the moment, but I'll never turn down tips or criticism!

Cheers,
Chris

Top
Wed, 2009-09-23 12:14
#3
Endin
Offline
newbie
United Kingdom
Last seen: 13 years 36 weeks ago
United Kingdom
Timezone: GMT+1
Joined: 2009-09-23
Posts: 4
Points: 0

Hi! Your problem is

Hi!

Your problem is here:

This is your footer style:

#footer{background:transparent url(../images/footerbg.png) no-repeat scroll center top;
color:#FBFBFB;
height:200px;
margin:0 auto;
text-align:center;
width:960px;}

Change the width to 100% and set background-repeat to repeat-x

Hope this will help

Top
Thu, 2009-09-24 17:02
#4
kilavasun
Offline
Regular
Brasil
Last seen: 13 years 36 weeks ago
Brasil
Timezone: GMT-3
Joined: 2009-03-23
Posts: 17
Points: 0

Oh, i see

Hello again!

Hmm, now i see what you wanted! but your footer text is behind the content bg image. put your div#footer inside the div#contentpush and remove that z-indexes and your layout will be done.

Best regards,
Kil.

PS.: after this, remove that -200px from #wrapper margin ok? Wink

Top
  • Locked