Content box doesnt go to bottom of page

HTML & CSS
1

hi all…

im sure there is an easy way to do this…

im trying to get my content box to go down to the bottom of the page…
regardless of how much content is in the box…
and regardless of how big browser window is…

http://www.bluecrushdesign.co.za/travel/destinations_thailand.html

how do i get div id=midcontainer with its background…to go all the way to bottom?

ive tried min-height and overflow hidden doesnt make any difference(i sued this on another site and it went to bottom) , im missing something?

css for it is this:

#midcontainer{
width: 793px; /818px/
background-color:#E8E8E8;
margin-left:13px;
padding: 0px 0px 20px 25px;
min-height: 100%;
overflow: hidden;
}

2

The way you have your css the midcontainer will never extend to 100%. There are ways of doing so but that needs a bit more than just the min-height property

3

ok… so how should i have my css?
what ways?

can anyone help!?

Thankyou!

4

One of the ways to extend to 100% is to use the min-height property on the main container. For that to work tou have to set a height of 100% for htm and body as well:


html, body {
    height: 100%/* min-height 100% can only be applied if there is a reference. The 100% height on body, htm is this reference to use the min-height 100% on the container */ 
    margin: 0;
    padding: 0;
}

#container {
    width:870px;
    min-height: 100%
    margin:0 auto;
    background:#E8E8E8;   
}

* html #container {/* IE 6 min-height hack */
    height: 100%;
}

header {
    background-image:url("../images/topbar.png");
    background-position:center bottom;
    background-repeat:no-repeat;
    height:125px;
    width:843px;
}

#midcontainer {
    margin-left:13px;
    /* min-height:100%; is now applied to the main container */
    overflow:hidden;
    /* padding:0 0 20px 25px; I would not use any padding on a holding container instead try to use it on the content inside */
     width:793px;
}

In this simple example I have set the min height on the container div. As you work with images, which i don’t have, you should be able to pick it up from this point on. Just play around with margins for the #midcontainer

5

Thanks, I’ve seen this done before and I tried a similar version of this,problem is I have a header as well with its own back image above the container that I want to extend, I can’t get it too work with that

6

But as i see it the header is inside the container.

7

Tried that, header has own background image that doesn’t show up over even if u put important on it and its own colour above the back image that’s different to conainer back colour

8

I just tested it and it is working for me so I really don’t understand why it isn’t working for you.

9

finally got it to work!
http://www.bluecrushdesign.co.za/travel/destinations_thailandextend3.html

1 problem…
do you see i have added an adspace div?

I really want this to be to the right side of the container that ive now managed to push all the way down…as it will have its own background colour so its needs to be to the right of the light grey container block…

i cant get this to work with the extend :frowning:
any ideas?

10

Hi,

What are you trying to do with that adspace div?

Is it supposed to be a column that goes all the way to the bottom of the page?

If so you should create a two column floated layout with a left column and a right column and then stack individual elements inside as required.

You can’t add 100% height (or min-height:100%) to your adspace element as there is nothing for it to inherit the height from and even if there was you would then get another full 100% taking you way below the fold.

Read the CSS faq on 100% height and then also read the sticky footer faq as I believe you are trying for a sticky footer also looking at your code (see my sig for links to the faq) .

The easiest way to have two equal columns is to create a repeating image on your main page container that holds both column backgrounds. You just rub out the header portion with its own background as required. You only have one shot at the 100% height effect and everything must be accomplished on this element. No other elements can have 100% height effect (unless you use my absolute column overlay techniques)

You also have some missing closing tags as your container isn’t closed and seems to be missing.

I’d need to see a drawing of the finished design to offer specific code as I’m not sure what you want this to look like :slight_smile:

11

sorry, i should have uploaded a drawing…

see attached…

i dont need the adspace to have 100% height,
i just thought id do it the same as container and maybe it would work…
lol

i just want the container block on left side of adspace to extend all the way down.
im trying to figure out how to put the adspace to right of extending container block

does this make sense with drawing now? :wink:

12

Where’s the attachment :slight_smile:

It looks to me as though you are doing something like this (without the full width images).

13

hey…
thanks …
i went to manage attachments and added it!

er i dont really want right column to extend down will your example work ok if im trying to do this?:

1054×536 13 KB

i dont want right block with ad space to extend all the way down…
must just have the background light grey image

can you see this url? image?:wink:

14

If you want the adspace hanging outside the main box then a quick fix would be something like this.


#container,#containerextend{overflow:visible}

#adspace {
background-color:red;
float:right;
margin-right:-150px;
min-height:0;
width:140px;
position:relative;
display:inline;
}

That means you’d need to use other clearing techniques instead of overflow:hidden.

You still have the footer to sort out as Im guessing you still want a sticky footer.

Of course looking at your drawing it seems that the box shouldn’t be hanging but actually part of the centered content so another approach would really be needed and it looks like a background repeated image is still the option to make the full column.

We really need the full dynamics as the method changes at every step unless we know what the total outcome is to be :slight_smile:

15

thanks paul, you rock!
im working with your suggestions ;-)))