Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stretch specific container divs in CSS layout?

    Hey,

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

    Stretch specific container divs in CSS layout?-layout-skeleton.gif

    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.
    Last edited by thegoatherder; 11-04-2009 at 10:41 PM. Reason: mistake in the html markup

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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; }

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by Excavator View Post
    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.
    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.

  • #5
    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 03:53 AM. Reason: add link

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by drhowarddrfine View Post
    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?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 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.
    Last edited by Rowsdower!; 11-04-2009 at 01:46 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    Excavator (11-04-2009)

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 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, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Quote Originally Posted by Rowsdower! View Post
    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.
    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.

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by drhowarddrfine View Post
    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 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."

    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!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    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

  • #12
    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??

  • #13
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 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."
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •