PDA

View Full Version : content height not reaching footer



lau87
Sep 23rd, 2009, 09:02 PM
The problem is about my new layout at http://vvs.4dimension.nl/test.html, the source code is available through view-source in the browser of Firefox or Internet Explorer.
At that location, I made a sticky footer at the bottom of the page. But the content (indicated with 'insert text - sdf') of the website will not reach this sticky footer. As you probably can see, the content ends halfway the page instead of fitting to the footer.
For a better view, I made a black solid line at the end of the content to let you see where it ends.
The result of the page must be identical as on this image: http://vvs.4dimension.nl/vvs_layout.jpg

Somebody who can fix my problem with CSS/HTML?
I mean, I tried several methods for the layout that has a header, content and footer, but without any good result.
Also I tried to replace the background of the content to the body of the page. This method is reachable on http://vvs.4dimension.nl/test3.html, but the reason why this is not working is that Internet Explorer will output the layout in a different way than Firefox. On IE the background I have replace will not fit with the headerimage as you can see on this image http://vvs.4dimension.nl/vvs_met_bg_in_ie.jpg

I really hope someone know how to fix it or maybe can advise me another way to slicing the layout.

Scriptet
Sep 23rd, 2009, 10:23 PM
Don't overthink it too much, just have the layout as normal, then apply a negative margin-top to the footer to shove it up behind the content to achieve the effect you need.

Here's an example:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
*{
margin:0;
padding:0;
}
body{
background:#F5F5F5;
}
#header{
background:url('http://vvs.4dimension.nl/gfx/layout/header_bg.jpg');
text-align:center;
}
#content{
margin:0 auto;
width: 704px;
background-color: #FFF;
background:url('http://vvs.4dimension.nl/gfx/layout/wrapper_bg.jpg');
min-height:84px;
position:relative;
z-index:1;
}
#content p{
padding:10px;
}
.footerDrop{
display:block;
height:54px;
background:url('http://vvs.4dimension.nl/gfx/layout/footer_top.jpg');
}
#footer{
background:url('http://vvs.4dimension.nl/gfx/layout/footer_bg.jpg');
min-height:136px;
margin-top:-54px;
padding-top: 74px;
color:#FFF; text-align:center;
}
</style>
</head>

<body>
<div id="header">
<img src="http://vvs.4dimension.nl/gfx/layout/header.jpg" width="704" height="180" alt="asdf" />
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in augue lorem. Sed non risus velit, ultrices ornare mauris. Phasellus convallis cursus nisi nec egestas. Integer quis elit nec nisi porttitor bibendum id id justo. Maecenas laoreet, velit at commodo tincidunt, eros neque luctus augue, id dignissim tortor magna quis turpis. Nam condimentum ligula vel lorem vestibulum tristique. Donec a magna vitae ante porttitor laoreet. Morbi euismod luctus hendrerit. Sed eu neque leo, in auctor orci. Duis dapibus odio sit amet quam lobortis non tristique eros ultricies. Maecenas leo sapien, ornare id faucibus sit amet, convallis vitae nibh. Duis elit nisl, interdum quis placerat vel, facilisis nec risus. Maecenas nec adipiscing tellus. Donec congue dolor non mi imperdiet lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vitae felis sodales libero tincidunt elementum. Integer ligula enim, lacinia a sagittis sed, varius at urna. Sed nibh leo, porta quis rhoncus non, cursus eu quam. Duis nisi est, ullamcorper vel viverra at, tempor id purus. Nunc ac libero ac eros placerat aliquet.</p>
<p>Phasellus lacinia velit a metus consectetur nec fermentum lorem hendrerit. Donec nec ligula tortor, in sollicitudin ligula. Duis id est purus, sit amet aliquet odio. Nunc tellus arcu, pretium et luctus non, pulvinar ac justo. Mauris eu dui et erat imperdiet sodales quis ac arcu. Aliquam nulla erat, malesuada non gravida in, tincidunt in lorem. Cras ac tortor sed mauris volutpat volutpat nec eu risus. Praesent quis laoreet dui. In fermentum, lorem ut rutrum laoreet, eros libero commodo mi, nec consectetur eros eros tincidunt nunc. Vestibulum tellus arcu, semper in rhoncus eget, vestibulum sit amet nisl. Nam vitae consectetur nisl. Morbi vel est in lacus aliquet pulvinar tincidunt sed justo. Aenean ipsum neque, sodales vel venenatis et, molestie et justo. Maecenas interdum risus sed metus scelerisque sed lobortis lorem semper.</p>
<span class="footerDrop"></span>
</div>
<div id="footer">
Some Footer Text
</div>
</body>
</html>


I used an empty span at the bottom of the content to hold the shadow background at the top of the footer, this might not be needed if you have another element inside your content which you can shove the background on.

Also if there is not much content, the footer won't reach the bottom, I wasn't sure if you were expecting a page to have no content, so I didn't implement any 100% min-height thing. Although it can probably be added if you were expecting this.

lau87
Sep 24th, 2009, 11:33 AM
Also if there is not much content, the footer won't reach the bottom, I wasn't sure if you were expecting a page to have no content, so I didn't implement any 100% min-height thing. Although it can probably be added if you were expecting this.

Wow, thank you, it is just another way of structuring the layout. But, I want to have a sticky footer at the bottom (sorry if I didn't mention that). I guess I will have pages that don't have too much content and it will be odd to see a white background after the footer.
Do you know how to add the min-height thing to have the footer always at the bottom of the viewport (except if the content is larger than the viewport of course).

Edit:
The code you gave me was excellent in Firefox , but IE visualizes differently, have a look at http://vvs.4dimension.nl/vvs_ie.jpg

Scriptet
Sep 24th, 2009, 02:57 PM
Hi,

So if the content is not enough, you want the white to take up the rest of the space?

Also for the second problem we just need to give #header a height:180px; seems to fix the IE7 problem.

lau87
Sep 24th, 2009, 04:25 PM
So if the content is not enough, you want the white to take up the rest of the space?

Also for the second problem we just need to give #header a height:180px; seems to fix the IE7 problem.

Hi there,

Yes, if I haven't enough content in the middle (in the content div), the white under the footer must be invisible by making the footer stick at the bottom. I mean, the footer must stick at the bottom always, except if there is more text in the content.

Yeah, seems to fix the problem by adding the height.

effpeetee
Sep 24th, 2009, 06:41 PM
This may help you. (http://ryanfait.com/sticky-footer/)

Much help here. (http://exitfegs.co.uk/Sources.html)

Frank

lau87
Sep 24th, 2009, 06:55 PM
Well, I tried using sticky footer, but this part I can't fix :(
Take a look at http://vvs.4dimension.nl/test5.html.
I applied the sticky footer; indeed the footer will stick at the bottom, but the content is floating en will not move with the footer like before (with the given code).
Someone knows the problem?

Scriptet
Sep 24th, 2009, 09:29 PM
Hi,

Here try this out:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
*{
margin:0;
padding:0;
}
html, body{
height:100%;
}
body{
background:#F5F5F5;
}
#container {
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
position:relative;
background:url('http://vvs.4dimension.nl/gfx/layout/wrapper_bg.jpg') center repeat-y;
overflow:auto;
}
#header{
background:url('http://vvs.4dimension.nl/gfx/layout/header_bg.jpg') repeat-x;
height:180px;
text-align:center;
}
#content {
width:704px;
margin:0 auto;
margin-bottom:156px;
position:relative; z-index:2;
}
#content p{
padding:10px;
}
#footer{
position:absolute; bottom:0; width:100%;
background:url('http://vvs.4dimension.nl/gfx/layout/footer_bg.jpg') bottom repeat-x;
}
#footerInner{
background:url('http://vvs.4dimension.nl/gfx/layout/footer_top.jpg') no-repeat top;
text-align:center; color:#fff;
min-height:136px;
padding-top: 74px;
}
</style>
</head>

<body>
<div id="container">

<div id="header">
<img src="http://vvs.4dimension.nl/gfx/layout/header.jpg" width="704" height="180" alt="asdf" />
</div>

<div id="content">
<p>Some Content</p>
</div>

<div id="footer">
<div id="footerInner">
Footer Text
</div>
</div>

</div>
</body>
</html>


Uses the usual 100% min-height techniques, set the content background to the container so it looks as though it's taking up the rest of the space but it's not.

Hopefully it works :)

lau87
Sep 24th, 2009, 09:41 PM
Thanks Scriptet, but I am afraid I had to tell you that I already used this way to place the wrapper_bg on the background of the container.
The reason why I rejected this structure was that it will not output the correct layout in Internet Explorer as you can see it here http://vvs.4dimension.nl/vvs_ie_failure.jpg
By minimalizing the width in small steps of the viewport in IE, the wrapper_bg of the container will not fit in the header as you can see on the image :(
This will work perfectly in Firefox, but IE is a ****brower, however, the website must look perfect in both browsers.
So, I alread tried this one, nevertheless I appreciate your effort and try, but this problem is a pain in the *** :confused:

I am not sure, but is there another way, I almost tried everything :(

Scriptet
Sep 24th, 2009, 10:29 PM
Hmm seems to be a strange IE bug (IE7 <) causing the header image to be 2pixels out of center.
For example if you just remove the image from the header altogether and set it as the background image for the header, it aligns fine. You could do this, depends if you need the image in the markup.

I'll have a look into the IE bug later if I get chance!!

lau87
Sep 25th, 2009, 01:49 PM
Exactly, that is a wierd IE bug I struggle with.
I don't really understand your new method.
I think I don't need the header in the markup.

I am not sure whether this IE bug can be solved :(

Fisher
Sep 25th, 2009, 02:27 PM
This has to do with the difference between a centered background and an element centered on the page. You can read about it here (http://www.positioniseverything.net./bg-centering.html).

One possible workaround is to put the image as the background of your inner div centered, while removing it's width attribute:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Sticky Footer Technique #2</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
font-family:arial, sans-serif;
font-size:small;
color:#666;
/*background: url(gfx/layout/footer_bg.jpg) repeat-x left bottom;*/
background: #f5f5f5 url(http://vvs.4dimension.nl/gfx/layout/header_bg.jpg) repeat-x left top;
}
h1 {
font:1em georgia, serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia, serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
font-size:9px;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
background: url(http://vvs.4dimension.nl/gfx/layout/wrapper_bg.jpg) repeat-y center top;
}
div#header {
background: url(http://vvs.4dimension.nl/gfx/layout/header_bg.jpg) repeat-x left top;
height: 180px;
}
div#header p {
font-style:italic;
font-size:1.1em;
margin:0;
}
div#header .inner {
margin: 0 auto;
position: relative;
height: 100%;
background:url(http://vvs.4dimension.nl/gfx/layout/header.jpg) no-repeat center top;
}
div#content {
padding:20px 20px 210px; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#content .inner {
margin: 0 auto;
border-bottom: 1px solid #000;
width: 704px;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
/*background:#ddd;*/
background: url(http://vvs.4dimension.nl/gfx/layout/footer_bg.jpg) repeat-x left top;
height: 210px;
color: #FFF;
}
div#footer p {
padding:1em;
margin:0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="inner"></div>
</div>
<div id="content">
<div class="inner">
<h2>Min-height</h2>
<p> The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes. </p>
<h2>Relative positioning</h2>
<p> Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer. </p>
<h2>Padding-bottom</h2>
<p> Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content. </p>
<p> Scale the text size a bit or resize your browser window to test this layout. The <a href="css/layout1.css">CSS file is over here</a>. </p>
<p> <a href="../css.html">Back to CSS Examples</a></p>
</div>
</div>
<div id="footer">
<p> This footer is absolutely positioned to bottom:0; of #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport. </p>
</div>
</div>
</body>
</html>

Scriptet
Sep 25th, 2009, 07:50 PM
Thanks never knew about the centered background problem

lau87
Sep 25th, 2009, 09:12 PM
I want to thank both of you for the effort and yes indeed, the solution by Fisher was the right one.
I never knew that this problem was known, I thought that my IE browser was dying :P
However, I was wondering how to deal with an empty div element like that one from Fisher (see code below)?

<div id="header">
<div class="inner"></div>
</div>

I mean, isn't it odd to have an empty div (class inner)? Is there a solution to fill this div? Maybe with a 1px by 1px spacer or do you have a better solution?

Scriptet
Sep 25th, 2009, 10:16 PM
If you want to have something meaningful there and have the background image still show you could use an image-replacement technqiue (http://css-tricks.com/css-image-replacement/)

For example you could have:

<h1>Some Meaningful Text Here</h1>

With the CSS:

h1{
width: imagewidth px;
height: imageheight px;
text-indent: -9999em;
background: url('img.jpg');
}

The negative text indent shoves the text of the screen so it can't be seen, therefore the image is shown, whilst there is text in the markup for search engines to see, and people who don't have CSS enabled for some reason.

Other than that there's no point in having a 1px spacer, it makes for no use at all, may aswell just have the empty DIV (I don't see what advantage you think it can have).

You are correct in thinking that you should try and avoid empty DIV's, and DIV's which serve no real purpose/redudant DIV's (sandbagging DIV's), so if you can get away without them it's better (but obviously the more complex the layout the liklehood you're gonna need them).

As for whether or not the inner DIV is really needed, i'm not sure i'll let Fisher answer that one as it's his layout :)

Fisher
Sep 26th, 2009, 12:41 AM
it's his layout :) That's the original page. I just removed the image.

This situation only comes up because of the use of the dropshadow below the entire header. If you didn't have it, then you could just trim the header a bit and use any of the above posted codes. The positioning problem would still exist, but you wouldn't see it.

If you have access to the original image lau87, I would erase the words and put them as an h1 tag as Scriptet suggested. Of course if you erase the words, you won't want the negative text-indent applied but instead position them within the "lens" part of the image. Anyone with images disabled will not be able to see the title of your page, so the h1 tags would help in this regard. Also help for seo. Additionally, placing the title of the page as it is into the background isn't the most semantic approach as many would tell you.

If you don't have access to the original image and therefore can't erase the words, still do what Scriptet says. The h1 tag should say "uw PARTNER in REINIGINGSAPPARATUUR".