Div height based on content.

**Chewmagroo** · Jun 13, 2012 08:50

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

**TechnoBear** · Jun 13, 2012 12:23

Originally Posted by Chewmagroo

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.

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.

Originally Posted by Chewmagroo

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.

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.

**Chewmagroo** · Jun 14, 2012 02:52

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!!

**ralph.m** · Jun 14, 2012 03:41

Originally Posted by Chewmagroo

Would it have anything to do with the fact that its using shortcode on the html section of a Wordpress page?

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

Code:

.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.

**Chewmagroo** · Jun 14, 2012 04:02

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!

**ralph.m** · Jun 14, 2012 05:23

Originally Posted by Chewmagroo

the footer now has issues on nearly all the other pages on the site!

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.)

**Paul O'B** · Jun 14, 2012 05:30

Originally Posted by Chewmagroo

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!

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.

**Chewmagroo** · Jun 14, 2012 06:21

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.

**ralph.m** · Jun 14, 2012 06:38

Originally Posted by Chewmagroo

Before I try your suggestion Paul, would it make sense to revert back to where I was at the beginning of this thread?

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?

**Chewmagroo** · Jun 14, 2012 07:43

Paul, Yes.

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

**ralph.m** · Jun 14, 2012 08:01

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

Code:

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;
}

**Paul O'B** · Jun 14, 2012 08:09

Originally Posted by Chewmagroo

Paul, Yes.

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

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.

**TechnoBear** · Jun 14, 2012 08:20

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?

**Chewmagroo** · Jun 14, 2012 08:21

I will work on this next week.

Thanks for your help so far.

**Chewmagroo** · Jul 3, 2012 02:43

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.

**Paul O'B** · Jul 3, 2012 05:13

HI,

That's exactly what I offered you in post #7.

Please refer to the sticky footer FAQ for exactly how to do this.

If you have trouble implementing it then post back here.

**Chewmagroo** · Jul 16, 2012 05:01

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!

**Paul O'B** · Jul 16, 2012 05:31

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:

Code:

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

<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>
<div id="footer">

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

**Chewmagroo** · Jul 16, 2012 07:11

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

**Chewmagroo** · Jul 17, 2012 01:47

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.

**ralph.m** · Jul 17, 2012 02:23

Is this still the page you are looking at?

http://rorymoore.com/test/?page_id=695

If so, the footer looks fine to moi.

**Chewmagroo** · Jul 17, 2012 03:15

Originally Posted by ralph.m

Is this still the page you are looking at?

http://rorymoore.com/test/?page_id=695

If so, the footer looks fine to moi.

No - this page is the only page on the site where the footer is actually working. All other pages don't including the homepage: http://rorymoore.com/test/

**ralph.m** · Jul 17, 2012 03:23

Originally Posted by Chewmagroo

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

Make sure to follow it really carefully. Your footer is inside the main_container div, whereas in the sticky footer tutorial, the footer is outside the main containaer (or "outer" container).

**Chewmagroo** · Jul 17, 2012 04:56

Originally Posted by ralph.m

Make sure to follow it really carefully. Your footer is inside the main_container div, whereas in the sticky footer tutorial, the footer is outside the main containaer (or "outer" container).

Sorry guys - this is beyond me.

Im focusing on the homepage here using Firebug in Firefox - As far as I can tell the footer is not inside either the 'main-container' div or the 'outer' div.

**Paul O'B** · Jul 17, 2012 05:01

Hi,

You have lots of errors on that page that need to be rectified.

At the top of the page you have an erroneous opening div that will cause problems in all browsers.

Remove it.

Code:

<div id="outer">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

Nothing can really be above the doctype anyway (apart form the xml declaration and html comments but both of those cause quirks mode in IE6 so are best avoided).

Remove the float from the main-container and then add clear:both to the footer.

Make sure #main-container finishes before the footer and that it is the only main wrapper on the page (i.e. remove #outer).

User Tag List

Thread: Div height based on content.

Thread Tools

Display

Div height based on content.

Bookmarks

Bookmarks

Posting Permissions