Resolved Stretch specific container divs in CSS layout? [Archive]

...

View Full Version : Resolved Stretch specific container divs in CSS layout?

thegoatherder

11-04-2009, 01:29 AM

Hey,

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

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

<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

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, 02: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 -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 (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).
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, 02:45 AM

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

<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

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, 03:41 AM

Have a look at a good argument why not to use absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).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.
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, 03: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, 01:27 PM

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? :confused:

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, 01: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 :thumbsup:):
#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, 04:24 PM

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

drhowarddrfine

11-04-2009, 06:34 PM

But isn't that...positioning? :confused:

That seems like semantics to meUsually 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.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, 08:55 PM

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.

I avoid floats for positioning elements except where floats are intendedHere, 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."

margins are for giving breathing space between elements, not positioningHere, 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. :rolleyes:

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, 09:02 PM

thegoatherder

11-04-2009, 09:04 PM

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

Rowsdower!

11-04-2009, 10: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."