18 replies [Last post]
xxSLRxx
xxSLRxx's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT-7
Joined: 2011-01-27
Posts: 11
Points: 15

I'm working on a website for my work and I'm having an issue with one of their requirements.
The site is essentially composed of three stacked div tags (think rows). The top and middle rows are a fixed height while the bottom row grows as content is added. The challenge I'm facing is that I'm required to have the bottom row either stretch to the bottom of the browser or to the end of the content (if the height is longer than the browser's).

Also, the top and bottom rows are assigned a background color while the middle row is transparent. I know it doesn't sound like this would be relevant to the positioning problem; however, it can be an issue should negative margin's be used.

Also, I apologize if this has been discussed before. I have looked throughout the site and online for a solution but I have yet to find one.

Since my site is not live, I can't post a link; however, I did make a rough mock-up to demonstrate the issue. Thanks in advance for any and all help.

    html,body {
	  margin: 0;
	  padding: 0;
	  height: 100%;
    }
 
	#row1 {
	  width: 800px;
	  height: 150px;
	  background: #FF0000;
	  margin-left: auto;
	  margin-right: auto;
	}
 
	#row2 {
	  width: 800px;
	  height: 250px;
	}
	#row3 {
	  width: 800px;
	  background: #FFFF00;
	  margin-left: auto;
	  margin-right: auto;
	}

<body>
 
<div id="row1"></div>
<div id="row2"></div>
<div id="row3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel arcu ut justo volutpat pharetra. Aenean convallis, sapien vel ultrices iaculis, lorem dui venenatis lacus, ac viverra lectus nibh ut mauris. Pellentesque volutpat facilisis felis, vitae tincidunt erat tincidunt vel. Ut ut ligula vel purus pellentesque venenatis. Etiam vitae nunc sem. Donec non purus ac erat pharetra consectetur. Sed ut erat at nulla tincidunt euismod. Donec molestie risus sit amet diam laoreet vitae congue nunc tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean euismod bibendum lectus, id imperdiet est pharetra eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero nibh, laoreet a tristique nec, convallis id felis. Integer egestas lobortis fringilla. Nunc augue elit, dictum eu dictum vitae, porta eget arcu. Praesent odio sapien, condimentum sed congue sed, imperdiet eu nulla.
</div>
 
 
</body>
</html>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 6 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

Sounds similar to a sticky

Sounds similar to a sticky footer issue. http://www.pmob.co.uk/temp/sticky-footer.htm

Maybe just wrap the whole thing in a container with a min-heigh: 100%; along with a html, body { height: 100%; } like this:

<!DOCTYPE html>
<html>
<head>
	<title>Untitled Page</title>
	<style type="text/css">
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#wrap {
			background: #FFFF00;
			margin: auto;
			min-height: 100%;
			width: 800px;
		}
		#row1 {
			background: #FF0000;
			height: 150px;
			margin: auto;
			width: 800px;
		}
		#row2 {
			background: #f08;
			height: 250px;
			margin: auto;
			width: 800px;
		}
		#row3 {
			margin: auto;
			width: 800px;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="row1">
		</div>
		<div id="row2">
		</div>
		<div id="row3">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel arcu ut justo volutpat pharetra. Aenean convallis, sapien vel ultrices iaculis, lorem dui venenatis lacus, ac viverra lectus nibh ut mauris. Pellentesque volutpat facilisis felis, vitae tincidunt erat tincidunt vel. Ut ut ligula vel purus pellentesque venenatis. Etiam vitae nunc sem. Donec non purus ac erat pharetra consectetur. Sed ut erat at nulla tincidunt euismod. Donec molestie risus sit amet diam laoreet vitae congue nunc tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean euismod bibendum lectus, id imperdiet est pharetra eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero nibh, laoreet a tristique nec, convallis id felis. Integer egestas lobortis fringilla. Nunc augue elit, dictum eu dictum vitae, porta eget arcu. Praesent odio sapien, condimentum sed congue sed, imperdiet eu nulla.
		</div>
	</div>
</body>
</html>

or if the body is open to use just skip the wrapper and use the body like this:

<!DOCTYPE html>
<html>
<head>
	<title>Untitled Page</title>
	<style type="text/css">
		html {
			background: #fff;
			height: 100%;
			margin: 0;
			padding: 0;
		}
		body {
			background: #FFFF00;
			margin: auto;
			min-height: 100%;
			width: 800px;
		}
		#row1 {
			background: #FF0000;
			height: 150px;
			margin: auto;
			width: 800px;
		}
		#row2 {
			background: #f08;
			height: 250px;
			margin: auto;
			width: 800px;
		}
		#row3 {
			margin: auto;
			width: 800px;
		}
	</style>
</head>
<body>
	<div id="row1">
	</div>
	<div id="row2">
	</div>
	<div id="row3">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel arcu ut justo volutpat pharetra. Aenean convallis, sapien vel ultrices iaculis, lorem dui venenatis lacus, ac viverra lectus nibh ut mauris. Pellentesque volutpat facilisis felis, vitae tincidunt erat tincidunt vel. Ut ut ligula vel purus pellentesque venenatis. Etiam vitae nunc sem. Donec non purus ac erat pharetra consectetur. Sed ut erat at nulla tincidunt euismod. Donec molestie risus sit amet diam laoreet vitae congue nunc tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean euismod bibendum lectus, id imperdiet est pharetra eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero nibh, laoreet a tristique nec, convallis id felis. Integer egestas lobortis fringilla. Nunc augue elit, dictum eu dictum vitae, porta eget arcu. Praesent odio sapien, condimentum sed congue sed, imperdiet eu nulla.
	</div>
</body>
</html>

xxSLRxx
xxSLRxx's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT-7
Joined: 2011-01-27
Posts: 11
Points: 15

Thank you for such a quick

Thank you for such a quick response. Smile

I did look over the "sticky footer" solution prior to posting as it is very similar to what I'm trying to accomplish; however, I believe that method requires the footer to be a fixed height. Being that my "footer" isn't a fixed height, I don't know how I can use this method.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 6 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

xxSLRxx wrote: Thank you for

xxSLRxx wrote:

Thank you for such a quick response. Smile

I did look over the "sticky footer" solution prior to posting as it is very similar to what I'm trying to accomplish; however, I believe that method requires the footer to be a fixed height. Being that my "footer" isn't a fixed height, I don't know how I can use this method.

That's just the basic concept. Do you have a comment on either of the complete solutions I provided?

xxSLRxx
xxSLRxx's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT-7
Joined: 2011-01-27
Posts: 11
Points: 15

Once again, thanks for such a

Once again, thanks for such a quick reply.

I did try your example (the one that uses the body tag since it is available), it does almost exactly what I need. In all honestly, I don't understand why/how your code forces the bottom row to stretch/position properly. Does the min-height on the parent container cause the child div tags to occupy the full height?

Lastly, it doesn't do exactly what I need because the middle div has to have a transparent background that inherits the body tag's background. If I try using transparent with your code, it takes on the bottom div tag's background color...

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 6 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

xxSLRxx wrote:Once again,

xxSLRxx wrote:

Once again, thanks for such a quick reply.

I did try your example (the one that uses the body tag since it is available), it does almost exactly what I need. In all honestly, I don't understand why/how your code forces the bottom row to stretch/position properly. Does the min-height on the parent container cause the child div tags to occupy the full height?

Lastly, it doesn't do exactly what I need because the middle div has to have a transparent background that inherits the body tag's background. If I try using transparent with your code, it takes on the bottom div tag's background color...

It's probably be quicker if you showed what you really want then. Do you have an image of the layout you're designing?

xxSLRxx
xxSLRxx's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT-7
Joined: 2011-01-27
Posts: 11
Points: 15

I'm having the same issue

I'm having the same issue using your wrapper method. I'll post the code I'm using just in case I'm doing something wrong... Please notice the minor change to the row2 CSS. As always, thank your for your help.

<!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">
<head>
	<title>Untitled Page</title>
	<style type="text/css">
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#wrap {
			background: #FFFF00;
			margin: auto;
			min-height: 100%;
			width: 800px;
		}
		#row1 {
			background: #FF0000;
			height: 150px;
			margin: auto;
			width: 800px;
		}
		#row2 {
			background: transparent;
			height: 250px;
			margin: auto;
			width: 800px;
		}
		#row3 {
			margin: auto;
			width: 800px;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="row1">
		</div>
		<div id="row2">
		</div>
		<div id="row3">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel arcu ut justo volutpat pharetra. Aenean convallis, sapien vel ultrices iaculis, lorem dui venenatis lacus, ac viverra lectus nibh ut mauris. Pellentesque volutpat facilisis felis, vitae tincidunt erat tincidunt vel. Ut ut ligula vel purus pellentesque venenatis. Etiam vitae nunc sem. Donec non purus ac erat pharetra consectetur. Sed ut erat at nulla tincidunt euismod. Donec molestie risus sit amet diam laoreet vitae congue nunc tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean euismod bibendum lectus, id imperdiet est pharetra eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero nibh, laoreet a tristique nec, convallis id felis. Integer egestas lobortis fringilla. Nunc augue elit, dictum eu dictum vitae, porta eget arcu. Praesent odio sapien, condimentum sed congue sed, imperdiet eu nulla.
		</div>
	</div>
</body>
</html>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 6 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

Is this sort of what you're

Is this sort of what you're looking for?
http://feelerdealer.com/fixedBG.html

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 6 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

If not can you show the

If not can you show the actual layout you wish to achieve?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 20 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

whats feelerdealer?

whats feelerdealer?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 6 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

CupidsToejam wrote: whats

CupidsToejam wrote:

whats feelerdealer?

A domain name I never developed. Maybe soon.

xxSLRxx
xxSLRxx's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT-7
Joined: 2011-01-27
Posts: 11
Points: 15

Unfortunately, I don't have a

Unfortunately, I don't have a live site to show. Basically, the layout is exactly the way yours does. The only difference is the middle row should inherit the body's background color.

For example, let say I had the following code:

<!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">
<head>
	<title>Untitled Page</title>
	<style type="text/css">
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		body {
			background: blue;
		}
		#wrap {
			background: #FFFF00;
			margin: auto;
			min-height: 100%;
			width: 800px;
		}
		#row1 {
			background: #FF0000;
			height: 150px;
			margin: auto;
			width: 800px;
		}
		#row2 {
			background: transparent;
			height: 250px;
			margin: auto;
			width: 800px;
		}
		#row3 {
			margin: auto;
			width: 800px;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="row1">
		</div>
		<div id="row2">
		</div>
		<div id="row3">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel arcu ut justo volutpat pharetra. Aenean convallis, sapien vel ultrices iaculis, lorem dui venenatis lacus, ac viverra lectus nibh ut mauris. Pellentesque volutpat facilisis felis, vitae tincidunt erat tincidunt vel. Ut ut ligula vel purus pellentesque venenatis. Etiam vitae nunc sem. Donec non purus ac erat pharetra consectetur. Sed ut erat at nulla tincidunt euismod. Donec molestie risus sit amet diam laoreet vitae congue nunc tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean euismod bibendum lectus, id imperdiet est pharetra eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero nibh, laoreet a tristique nec, convallis id felis. Integer egestas lobortis fringilla. Nunc augue elit, dictum eu dictum vitae, porta eget arcu. Praesent odio sapien, condimentum sed congue sed, imperdiet eu nulla.
		</div>
	</div>
</body>
</html>

I need it to look like that except the middle row needs to be blue (since that is body tag's color). Being that we are "faking" the bottom row's background color/height using the wrapper div tag's properties, the transparency isn't working the way I need it to.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 6 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

What about the link I posted?

What about the link I posted? Does that pass muster?

xxSLRxx
xxSLRxx's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT-7
Joined: 2011-01-27
Posts: 11
Points: 15

That is exactly what I'm

That is exactly what I'm trying to do visually. The only thing is my boss wants the middle row to inherit the background property of the body tag instead of just assigning both it and the body tag the same image.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 6 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

xxSLRxx wrote: That is

xxSLRxx wrote:

That is exactly what I'm trying to do visually. The only thing is my boss wants the middle row to inherit the background property of the body tag instead of just assigning both it and the body tag the same image.

You're going to have to tell me a good reason for that.

xxSLRxx
xxSLRxx's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT-7
Joined: 2011-01-27
Posts: 11
Points: 15

LOL. Trust me when I say I

LOL. Trust me when I say I agree. I personally can't think of any reason to do it that way. Unfortunately, that is what my boss wants for some reason that is beyond me and I'm not in a real position to argue.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 6 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

xxSLRxx wrote: LOL. Trust me

xxSLRxx wrote:

LOL. Trust me when I say I agree. I personally can't think of any reason to do it that way. Unfortunately, that is what my boss wants for some reason that is beyond me and I'm not in a real position to argue.

Well, tell him/her to email me. I have no trouble telling him that he's wrong (or her that she's wrong). Tongue

xxSLRxx wrote:

That is exactly what I'm trying to do visually. ...

Concerning styling, perception is reality. If it looks how you want it then the styling has accomplished its only purpose.

xxSLRxx
xxSLRxx's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT-7
Joined: 2011-01-27
Posts: 11
Points: 15

Yeah, I'm just going to use

Yeah, I'm just going to use your method. If he complains, I'm use your explanation:

"Concerning styling, perception is reality. If it looks how you want it then the styling has accomplished its only purpose."

I actually have a second question that builds upon your solution. If I were to nest a "footer div" in the bottom row, can I have it "stick to the bottom" using CSS? Can I use a variation of the sticky footer method to accomplish this?

Lastly, thanks for all of your help. I really appreciate it.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 6 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

Yes, your basic sticky footer

Yes, your basic sticky footer should work as long as it's a fixed height. Just drag the wrapper up with a negative top margin equal to the height of the footer and put the footer outside of the wrapper.

xxSLRxx wrote:

Yeah, I'm just going to use your method. If he complains, I'm use your explanation:

"Concerning styling, perception is reality. If it looks how you want it then the styling has accomplished its only purpose."

Laughing out loud Yay, I'm quote-worthy.