Div height based on content

HTML & CSS
1

I need the height of the black “video_content” div on this page: http://rorymoore.com/test/?page_id=695 to expand when new content is added.

Any ideas?

Also for some reason the footer overlaps the div and is sitting above the bottom of the page which doesnt occur on any other page.

Thanks

2

Do you mean “video_container”? There is no “video_content” that I can see. A div will normally expand to fit, but in this case, you’ve given it a fixed height of 700px. Either remove that altogether, or change it to min-height: 700px if you want to ensure it doesn’t get smaller than that.

On that page, the footer is outside the “main-container” div, but on other pages it’s inside it. Therefore on other pages, the footer is positioned relative to that div, but on this page it’s positioned relative to the viewport, in the absence of a positioned ancestor.

Hope that makes sense. It’s been a long day. :slight_smile:
[/FONT]

3

Thanks TechnoBear. Yes sorry, I should have said “video_container”.

I have already tried removing the ‘height: 700px;’ code but the div just collapses to the size of the padding. It’s as if the “tubepress_gallery…” div is not inside the “video_container” div, but it is!

I’ve also tried ‘min-height: 300px;’ hoping that it would wrap around the videos but it just collapses to 300px behind the videos. Would it have anything to do with the fact that its using shortcode on the html section of a Wordpress page? As follows:

<div class=“video_container”>
[tubepress]
</div>

Re the footer. I can see in Firebug what you’re saying about it not being inside the “main-container” div but unfortunately I’m clueless when it comes to php, so don’t know how to correct it.

Yes, evey day seems like a long day when your trying to learn code!!

4

No, it’s a simple CSS issue: a container doesn’t wrap around floated contents by default. The easiest way to make it do so it with

.video_container {
  overflow: hidden;
}

That will fix it. You can then remove the min-height.

Your footer has problems, though. Remove position: absolute from it and it will sit naturally under everything else. :slight_smile:

5

Thanks for that - the video div issue is resolved now by adding your code.

Re the footer - yes this works on the video page, but the footer now has issues on nearly all the other pages on the site!

6

What issue are those? How do you want it to appear? (I’m having trouble checking, as the pages take a long time to load.)

7

If you want the footer to stick to the bottom of the viewport on short pages then you may be looking for a sticky footer but its takes a bit of effort to get right.

8

Before I try your suggestion Paul, would it make sense to revert back to where I was at the beginning of this thread? My reasoning is that I originally only had footer issues with 1 page but right now I have issues on 4 or 5 pages.

9

I wouldn’t recommend that. This is a separate issue from the rest of the content. The question is: what do you want the footer to do? Do you want it stuck to the bottom of each page?

10

Paul, Yes.

I want the footer stuck to bottom like this page: http://rorymoore.com/test/?page_id=695

11

Try this, which is a basic distillation of the link Paul gave:


html, body {
  height:100%;
}

html, body {
  margin:0;
  padding:0
}

#main-container {
  min-height:100%;
}

* html #main-container {/* ie6 and under only*/
  height:100%;
}

#main-container {
  margin-top: -40px;
}

#header {
  border-top: 40px solid #141414;
}

#footer {
  height: 40px;
}
12

Well actually you have stuck the footer on that page under the fold no matter how tall someone monitor is. On my 27" imac the footer is still below the fold and I would not know it was there. The reason for this is that you have set the container above to have a minimum of 100% height and therefore the footer is pushed below the fold always. You would need to give the footer a negative top margin equal to its height to drag it back into view. Then you would need to preserve that negative margin space by adding some bottom padding to the element above it (not the 100% wrapper).

Read the link posted above for how to construct a more reliable sticky footer or refer to the basic demo. You will of course need to follow that structure on every page.

If ou get stuck after reading and trying then just shout and we’ll try to help.

13

I think we may be at cross-purposes here, meaning different things by the same phrase. @Chewmagroo - am I right in thinking you want the footer to appear at the bottom of the page - i.e. the end of the content - but on pages where the content is short, you want the footer to appear at the bottom of the screen, not immediately after the content?

14

I will work on this next week.

Thanks for your help so far.

15

Sorry for not getting back sooner - super busy with other projects.

TechnoBear: you are correct. i want the footer at the bottom of every page after the content but on pages with short content I want the footer stuck to the bottom of the page. For example the Home page footer is almost at the top!

Thanks.

Off on holiday for 2 weeks so apologies if I do not reply within this period.

16

HI,

That’s exactly what I offered you in post #7.:slight_smile: Please refer to the sticky footer FAQ for exactly how to do this.

If you have trouble implementing it then post back here.

17

Paul,

I have tried the ‘sticky footer’ but I couldn’t get it to work.

This is most likely due to the fact that I’m pretty new to coding and don’t really know what I’m doing. I tried it on the homepage but the footer ended up at the top beside the navigation menu making the page twice as wide as it was before.

I’m thinking perhaps coding is not for me!

18

On your home page the footer is inside the main-container and therefore sits under the content in that container and not under the container itself.

Move the closing div of the main-container so that the footer is not contained within it. The parent of the footer should be the body element.

You also have some erroneous code here:


</div>
<!-- end #header -->

[B]<body>
<!-- <img alt="full screen background image" src="wp-content/home_bg_02_bw.jpg" id="full-screen-background-image" /> --> 
<!--<div class="home_text">
      <div>
	 <p class="home_text_style">I am a Professional Photographer based in Belfast, 
	 Northern Ireland specializing in still life, interior and exterior photography. 
	 Have a browse through the site to discover what projects I have been working on recently. 
	 If you like what you see and would like to use my services drop me an email or give me a call.</p>
      </div>
     <!-- <img class="align_text" src="wp-content/text_bg.png"> --> 
<!--</div>-->

</body>[/B]
<div id="footer">

That whole extra body section (marked in bold) should be removed.

19

Re the main container div - I don’t know how to do this because of the php.

If this was a single page of html and a css file I would have no problems.

Ill try to figure this out and get back to you.

Thanks

20

As far as I can tell I have done all those things you suggested for the homepage. The footer is now over on the right at the top though.