Resolved Stretch specific container divs in CSS layout?

thegoatherder · 11-04-2009, 02:29 AM

Hey,

Trying to make a fluid CSS layout as per the attached diagram.

Click image for larger version

Name: layout-skeleton.gif
Views: 24
Size: 19.2 KB
ID: 7898

The blue and red containers in the diagram (#content and #stretch in the CSS) should stretch vertically, while the green ones have static heights and keep their positioning relative to the #content and #stretch

#content contains text/images and should have a vertically repeating background-image.

#stretch contains nothing, but also has a repeating background image.

My current code looks like this:
HTML

Code:

<body>
    <div id="wrapper">
	<div id="container">
<div id="logo"></div>
			<div id="content"><div id="contentPane"><h1>Contact</h1>
    <p>Lorem ipsum dolor sit amet , consectetur adipiscing elit. Nunc eu ipsum quis velit blandit volutpat. Praesent ornare blandit congue. Duis auctor dignissim placerat. Integer malesuada sapien bibendum enim malesuada varius. Nunc in nunc a mi pulvinar imperdiet. Donec erat augue, convallis laoreet aliquam vel, pellentesque vel lacus. Fusce dignissim sagittis nulla. Quisque sagittis urna justo. Proin ultrices dapibus massa, vitae aliquet velit varius at. Sed id erat eu magna consectetur condimentum. Praesent at ante id nisi mollis lobortis vitae nec lectus. Suspendisse in semper risus. Suspendisse eget convallis ipsum. Phasellus ornare, tortor mattis eleifend auctor, odio est condimentum justo, nec posuere tortor tortor et dolor. Pellentesque arcu magna, facilisis vitae aliquam at, sodales id risus. Ut varius, tellus et fringilla eleifend, turpis dolor elementum eros, et cursus metus elit quis dui. Maecenas imperdiet accumsan dictum.</p>
    <p>Suspendisse et tempor ligula. Cras ultricies enim sit amet sem pulvinar eget porttitor nisl euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam quis consectetur sapien. Nam id dui enim, eleifend consequat ipsum. Aenean elementum enim magna, vel malesuada justo. Donec at velit a dui ornare commodo. Proin auctor rhoncus nibh id tincidunt. Ut in ante nisl. In vel sem elit, id congue mauris. In augue dolor, egestas sit amet porta vel, egestas quis velit. Morbi sapien massa, adipiscing eu vestibulum sed, porta congue quam. Aenean pellentesque neque nec enim posuere eget bibendum risus adipiscing. Etiam interdum rutrum est vel auctor.</p>
    <p>Integer tortor odio, volutpat a euismod congue, molestie eget est. Proin varius, velit non rutrum gravida, mauris nulla fermentum dui, ac gravida justo metus ac nisl. Aliquam venenatis nulla et libero pretium gravida. Curabitur volutpat nunc eu justo auctor tempor vestibulum turpis laoreet. In quis tempus enim. Nam imperdiet velit et purus molestie mollis. Pellentesque et mi in justo malesuada dignissim. Pellentesque sit amet justo nisi, vitae gravida nisi. Mauris eget justo justo, et tempor metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed congue volutpat elit, eget vulputate tortor viverra pretium.</p>
    </div></div>
		  <div id="hat"></div>
		<div id="stretch"></div>
		  <div id="animation"></div>
			<div id="footer"></div>
			</div>
    </div> 
</body>

CSS

Code:

html, body { 
	height: 100%;
	margin: 0;
	padding: 0;
}

#wrapper{
	width: 727px;  
	height: 100%;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	padding: 0;
} 

#container {
	padding: 0;
	border: none;
	height: 100%;
	position: relative;
	text-align: left;
	width: 727px;
}

#logo {
	background: url('alex-catering-logo.gif') 0 0 no-repeat;
	border: none;
	height: 66px;
	left: 0px;
	padding: 0px;
	position: absolute;
	width: 726px;
	top: 0;
	margin: 0;
}

#content {
	background: url('content.gif') 0 0 repeat-x;
	border: none;
	height: 100%;
	left: 0px;
	padding: 0px;
	text-align: left;
	position: relative;
	top: 66px;
	width: 335px;
	clear:left
}

#contentPane {
	border: none;
	left: 0px;
	padding: 0px;
	position: relative;
	width: 300px;
	margin: 40px 0 0 40px;
}

#hat { 
	background: url('top-chef-hat.gif') 0 0 no-repeat;
	border: none;
	height: 154px;
	left: 335px;
	padding: 0px;
	position: absolute;
	top: 66px;
	width: 391px;
	clear:right;
}

#stretch { 
	background: url('stretch.gif') 0 0 repeat-x;
	border: none;
	height: 100%;
	left: 335px;
	padding: 0px;
	position: absolute;
	top: 220px;
	width: 391px;
	text-align: left;
	clear: left;
}

#animation {
	background: url('alex_web_anim.gif') 0 0 no-repeat;
	border: none;
	height: 308px;
	left: 335px;
	padding: 0px;
	position: absolute;
	top: 230px;
	width: 391px;
	clear:right;
}

#footer {
	background: url('footer.gif') 0 0 no-repeat;
	border: none;
	height: 46px;
	left: 0px;
	padding: 0px;
	position: absolute;
	top: 538px;
	width: 726px;
	clear: both;
}

Any suggestions would be much appreciated!!!
:-)

-- A.

Excavator · 11-04-2009, 03:05 AM

Hello thegoatherder,
Sometimes it helps to put a background color on your elements just so you can see where they are going.
Like this -

Code:

html, body { 
	height: 100%;
background: #fc0;
}
* {
	margin: 0;
	padding: 0;
border: none;
}
#wrapper{
	width: 727px; 
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
#container {
	position: relative;
	text-align: left;
	width: 727px;
}
#logo {
	background: #ccc url('alex-catering-logo.gif') 0 0 no-repeat;
	height: 66px;
	left: 0px;
	padding: 0px;
	position: absolute;
	width: 726px;
	top: 0;
}
#content {
	background: #00f url('content.gif') 0 0 repeat-x;
	left: 0px;
	padding: 0px;
	text-align: left;
	position: relative;
	top: 66px;
	width: 335px;
}
#contentPane {
	left: 0px;
	position: relative;
	width: 300px;
	margin: 40px 0 0 40px;
background: #fff;
}
#hat { 
	background: #f00 url('top-chef-hat.gif') 0 0 no-repeat;
	height: 154px;
	left: 335px;
	position: absolute;
	top: 66px;
	width: 391px;
}
#stretch { 
	background: #000 url('stretch.gif') 0 0 repeat-x;
height: 100%;
	left: 335px;
	position: absolute;
	top: 220px;
	width: 391px;
	text-align: left;
}

#animation {
	background: #e06 url('alex_web_anim.gif') 0 0 no-repeat;
	height: 308px;
	left: 335px;
	position: absolute;
	top: 230px;
	width: 391px;
}

#footer {
	background: #0f0 url('footer.gif') 0 0 no-repeat;
	height: 46px;
	left: 0px;
	position: absolute;
	top: 538px;
	width: 726px;
}

Have a look at a good argument why not to use absolute positioning.
If you position your elements with floats and margins instead, it would be easy for the elements to expand they way you want.

thegoatherder · 11-04-2009, 03:45 AM

Quote:

Originally Posted by Excavator

If you position your elements with floats and margins instead, it would be easy for the elements to expand they way you want.

OK, I've tried this now. It is ALMOST there!!! I have everything fitting, and the #content container stretches as I want it to - but the #stretch div does not stretch to match. It must stretch the same amount of pixels as the #content container does.

Any ideas?

HTML

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>index.gif</title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<style type="text/css">
td img {display: block;}</style>
		<!--Fireworks CS3 Dreamweaver CS3 target.  Created Tue Nov 03 11:21:38 GMT-0800 (Pacific Standard Time) 2009-->
		<link href="index.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
    <div id="wrapper">
    	<div id="navigation">
        <ul>
         <li><a href="index.html">about</a></li>
         <li><a href="reviews.html">reviews</a></li>
         <li><a href="menus.html">menus</a></li>
         <li><a href="contact.html">contact</a></li>
         <li><a href="links.html">links</a></li>	
        </ul>
        </div>
		<div id="container">
			<div id="logo"></div>
			<div id="content"><div id="contentPane"><h1>Contact</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ipsum quis velit blandit volutpat. Praesent ornare blandit congue. Duis auctor dignissim placerat. Integer malesuada sapien bibendum enim malesuada varius. Nunc in nunc a mi pulvinar imperdiet. Donec erat augue, convallis laoreet aliquam vel, pellentesque vel lacus. Fusce dignissim sagittis nulla. Quisque sagittis urna justo. Proin ultrices dapibus massa, vitae aliquet velit varius at. Sed id erat eu magna consectetur condimentum. Praesent at ante id nisi mollis lobortis vitae nec lectus. Suspendisse in semper risus. Suspendisse eget convallis ipsum. Phasellus ornare, tortor mattis eleifend auctor, odio est condimentum justo, nec posuere tortor tortor et dolor. Pellentesque arcu magna, facilisis vitae aliquam at, sodales id risus. Ut varius, tellus et fringilla eleifend, turpis dolor elementum eros, et cursus metus elit quis dui. Maecenas imperdiet accumsan dictum.</p>
    <p>Suspendisse et tempor ligula. Cras ultricies enim sit amet sem pulvinar eget porttitor nisl euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam quis consectetur sapien. Nam id dui enim, eleifend consequat ipsum. Aenean elementum enim magna, vel malesuada justo. Donec at velit a dui ornare commodo. Proin auctor rhoncus nibh id tincidunt. Ut in ante nisl. In vel sem elit, id congue mauris. In augue dolor, egestas sit amet porta vel, egestas quis velit. Morbi sapien massa, adipiscing eu vestibulum sed, porta congue quam. Aenean pellentesque neque nec enim posuere eget bibendum risus adipiscing. Etiam interdum rutrum est vel auctor.</p>
    <p>Integer tortor odio, volutpat a euismod congue, molestie eget est. Proin varius, velit non rutrum gravida, mauris nulla fermentum dui, ac gravida justo metus ac nisl. Aliquam venenatis nulla et libero pretium gravida. Curabitur volutpat nunc eu justo auctor tempor vestibulum turpis laoreet. In quis tempus enim. Nam imperdiet velit et purus molestie mollis. Pellentesque et mi in justo malesuada dignissim. Pellentesque sit amet justo nisi, vitae gravida nisi. Mauris eget justo justo, et tempor metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed congue volutpat elit, eget vulputate tortor viverra pretium.</p>
    </div></div>
		  <div id="hat"></div>
		<div id="stretch"></div>
		  <div id="animation"></div>
			<div id="footer"></div>
			</div>
    </div> 
	</body>
</html>

CSS

Code:

html, body { 
	height: 100%;
	text-align:center;
}

* {
	margin: 0;
	padding: 0;
	border: none;
}

#wrapper{
	width: 900px; 
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
#container {
	text-align: left;
	width: 727px;
	float: left;
	clear: right;
}
#logo {
	background: #ccc url('alex-catering-logo.gif') 0 0 no-repeat;
	height: 66px;
	padding: 0px;
	float: left;
	width: 726px;
}
#content {
	background: #00f url('content.gif') 0 0 repeat-y;
	padding: 0px;
	text-align: left;
	width: 335px;
	float: left;
	height: 100%;
}
#contentPane {	
	float: right;
	width: 300px;
	background: #fff;
}
#hat { 
	background: #f00 url('top-chef-hat.gif') 0 0 no-repeat;
	height: 154px;
	float: left;
	width: 391px;
}
#stretch { 
	background: #000 url('stretch.gif') 0 0 repeat-y;
	height: 100%;
	float: left;
	width: 391px;
	text-align: left;
}

#animation {
	background: #e06 url('alex_web_anim.gif') 0 0 no-repeat;
	height: 308px;
	float: left;
	width: 391px;
}

#footer {
	background: #0f0 url('footer.gif') 0 0 no-repeat;
	height: 46px;
	width: 726px;
	clear: both;
}

/*NAVIGATION*/
#navigation { margin: 80px 0 0 0; background-color: white; width: 150px; float: left; z-index:20; clear:left;} 
ul#navigation { margin: 10px 0 1em 0; border: 0px #222 solid; padding: 0; width: 150px; list-style: none; }
#navigation li { margin: 0; border: 0 none; padding: 0; display: inline; list-style: none; }
#navigation li a { height: 18px; width: auto !important; color: #A79E8C; background-color: white; margin 0; padding-bottom: 3px; border-bottom: 4px #6C5343 solid; float: none !important; display: block; font-family: Georgia, Verdana, Arial, Helvetica, sans-serif; font-size:16px; text-decoration: none; font-weight: bold; }
#navigation li ul { margin: 0 0 1em 20px; border: 0px #222 solid; padding: 0; width: 130px; list-style: none; }
#navigation li ul li { margin: 0; border: 0 none; padding: 0 0 0 0px; display: inline; list-style: none;  }
#navigation li ul li a { height: 18px; width: auto !important; color: #A79E8C; background-color: white; margin: 0px; padding: 0px; float: none !important; border: 0; display: block; font-family: Georgia, Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-decoration: none; font-weight: bold; }
#navigation li a:hover, .selected { background-color: #CE5E21; color: white; }

drhowarddrfine · 11-04-2009, 04:41 AM

Quote:

Originally Posted by Excavator

Have a look at a good argument why not to use absolute positioning.

To the contrary, my friend Tyssen is just giving a "heads up" on where noobs go wrong with ap and is not telling anyone to avoid it.

Quote:

If you position your elements with floats and margins instead, it would be easy for the elements to expand they way you want.

Not speaking to this code at all but I avoid floats for positioning elements except where floats are intended and margins are for giving breathing space between elements, not positioning.

thegoatherder · 11-04-2009, 04:46 AM

Does anyone have a line or two of code that can solve this for me? I'm sure just a minor adjustment to the #stretch div will complete the CSS to give the behavior I'm looking for???

EDIT: Here is the code in action with graphics: http://bit.ly/2PucUZ

Rowsdower! · 11-04-2009, 02:27 PM

Quote:

Originally Posted by drhowarddrfine

To the contrary, my friend Tyssen is just giving a "heads up" on where noobs go wrong with ap and is not telling anyone to avoid it.
Not speaking to this code at all but I avoid floats for positioning elements except where floats are intended and margins are for giving breathing space between elements, not positioning.

But isn't that...positioning?

That seems like semantics to me, but now I'm curious to see a page that you have laid out. Can you link us to anything?

Rowsdower! · 11-04-2009, 02:43 PM

I think we're over-thinking the problem here. Since no content will appear in the right-hand column anyway I don't think absolute positioning is such a risk (especially if min-height is given to the #content div - min-height:472px; seems to work). Why not try something like this (SAVE A BACKUP OF YOUR EXISTING CODE FIRST - just incase

):

Code:

#container {
clear:right;
float:left;
margin:0 -20px 0 0;
text-align:left;
width:727px;
position:relative;
background:#fff url(stretch.gif) repeat-y scroll right top;
}

#animation {
background:#EE0066 url(alex_web_anim.gif) no-repeat scroll 0 0;
float:left;
height:308px;
width:391px;
position:absolute;
right:1px;
bottom:46px;
}

After that there is just one little fix needed to repair the footer gif (you have built in a 10px or so vertical jog that has disjointed the image).

This works in FF3, but is not tested in any other browsers so far.

Excavator · 11-04-2009, 05:24 PM

Very cool Rowsdower! !
That'll teach me to dismiss ap so quickly.

drhowarddrfine · 11-04-2009, 07:34 PM

Quote:

Originally Posted by Rowsdower!

But isn't that...positioning?

That seems like semantics to me

Usually when we speak of positioning we mean using the CSS attribute of "position:". Margins and, especially, padding are not meant for placing elements clear across the other side of the page. In fact, padding is just ingrown margin; like a toenail.

Quote:

but now I'm curious to see a page that you have laid out. Can you link us to anything?

I could but I won't. Sorry.

Rowsdower! · 11-04-2009, 09:55 PM

Quote:

Originally Posted by drhowarddrfine

Usually when we speak of positioning we mean using the CSS attribute of "position:". Margins and, especially, padding are not meant for placing elements clear across the other side of the page. In fact, padding is just ingrown margin; like a toenail.

Quote:

I avoid floats for positioning elements except where floats are intended

Here, the definition of "positioning" is understood to be in a general sense - something to the effect of "getting things where you want them in the page."

Quote:

margins are for giving breathing space between elements, not positioning

Here, on the other hand, the definition of "positioning" is magically transformed into a very specific contextual connotation - despite the presence of contradictory context.

Of course! How silly of me to have missed that.

Meanwhile, back on Earth, this means that you don't use margins to get elements to be where you want them to be on the page. Forgive me, but that really would have been worth seeing!

thegoatherder · 11-04-2009, 10:02 PM

Quote:

Originally Posted by Rowsdower!

I think we're over-thinking the problem here. Since no content will appear in the right-hand column anyway I don't think absolute positioning is such a risk (especially if min-height is given to the #content div - min-height:472px; seems to work). Why not try something like this (SAVE A BACKUP OF YOUR EXISTING CODE FIRST - just incase

):

Code:

#container {
clear:right;
float:left;
margin:0 -20px 0 0;
text-align:left;
width:727px;
position:relative;
background:#fff url(stretch.gif) repeat-y scroll right top;
}

#animation {
background:#EE0066 url(alex_web_anim.gif) no-repeat scroll 0 0;
float:left;
height:308px;
width:391px;
position:absolute;
right:1px;
bottom:46px;
}

After that there is just one little fix needed to repair the footer gif (you have built in a 10px or so vertical jog that has disjointed the image).

This works in FF3, but is not tested in any other browsers so far.

Thank you!!!!!! This solves it! I've tried many solutions before this, spent hours on it and you solved it with just a couple of lines of CSS.

I had to add one extra absolute position attribute - on #hat (the section directly above #stretch

Code:

	position: absolute;
	top: 66px;
	right: 0px;

Tested working in FF3, Chrome 3, IE7/8

thegoatherder · 11-04-2009, 10:04 PM

PS - I'm new here and no idea how to mark a topic as RESOLVED??

Rowsdower! · 11-04-2009, 11:20 PM

Glad to help!

http://www.codingforums.com/postguide.htm

See point number 6 in the above link to see instructions for marking threads as "resolved."

11-04-2009, 04:46 AM	PM User \| #5
thegoatherder New to the CF scene Join Date: Nov 2009 Posts: 5 Thanks: 0 Thanked 0 Times in 0 Posts	Does anyone have a line or two of code that can solve this for me? I'm sure just a minor adjustment to the #stretch div will complete the CSS to give the behavior I'm looking for??? EDIT: Here is the code in action with graphics: http://bit.ly/2PucUZ Last edited by thegoatherder; 11-04-2009 at 04:53 AM.. Reason: add link

11-04-2009, 02:43 PM	PM User \| #7
Rowsdower! Regular Coder Join Date: Oct 2008 Location: Everywhere and nowhere...but mostly I'm in Ohio. Posts: 869 Thanks: 8 Thanked 155 Times in 154 Posts	I think we're over-thinking the problem here. Since no content will appear in the right-hand column anyway I don't think absolute positioning is such a risk (especially if min-height is given to the #content div - `min-height:472px;` seems to work). Why not try something like this (SAVE A BACKUP OF YOUR EXISTING CODE FIRST - just incase ): Code: #container { clear:right; float:left; margin:0 -20px 0 0; text-align:left; width:727px; `position:relative; background:#fff url(stretch.gif) repeat-y scroll right top;` } #animation { background:#EE0066 url(alex_web_anim.gif) no-repeat scroll 0 0; float:left; height:308px; width:391px; `position:absolute; right:1px; bottom:46px;` } After that there is just one little fix needed to repair the footer gif (you have built in a 10px or so vertical jog that has disjointed the image). This works in FF3, but is not tested in any other browsers so far. __________________ See Mediocrity in its Infancy \|\| Seek and you shall find... basically: free web tutorials \| free hosting (1) (2)\| view your page cross-browser/cross-platform It's usually a good idea to start out with this at the VERY TOP of your CSS: *` {border:0;margin:0;padding:0;}`** Last edited by Rowsdower!; 11-04-2009 at 02:46 PM..

11-04-2009, 05:24 PM	PM User \| #8
Excavator Senior Coder Join Date: Dec 2006 Location: Alaska Posts: 3,573 Thanks: 9 Thanked 460 Times in 454 Posts	Very cool Rowsdower! ! That'll teach me to dismiss ap so quickly. __________________ Validate often DURING development - Use it like a splelchecker \| Debug during Development \|Write it for FireFox, then hack it for IE Use the right DocType \| Validate your markup \| Validate your CSS \| Why validating is good \| Why tables are bad

11-04-2009, 11:20 PM	PM User \| #13
Rowsdower! Regular Coder Join Date: Oct 2008 Location: Everywhere and nowhere...but mostly I'm in Ohio. Posts: 869 Thanks: 8 Thanked 155 Times in 154 Posts	Glad to help! http://www.codingforums.com/postguide.htm See point number 6 in the above link to see instructions for marking threads as "resolved." __________________ See Mediocrity in its Infancy \|\| Seek and you shall find... basically: free web tutorials \| free hosting (1) (2)\| view your page cross-browser/cross-platform It's usually a good idea to start out with this at the VERY TOP of your CSS: *` {border:0;margin:0;padding:0;}`**

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread:

11-04-2009, 10:04 PM	PM User \| #12
thegoatherder New to the CF scene Join Date: Nov 2009 Posts: 5 Thanks: 0 Thanked 0 Times in 0 Posts	PS - I'm new here and no idea how to mark a topic as RESOLVED??