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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    100% height fluid layout horizontal division problem

    Hi all,

    I have a question regarding fluid layouts in HTML/CSS. I want to achive a simple 100% height, 100% width layout that divides the screen horizontally into 3 parts. First part (placed on top) should have height defined in px's. The last part (on bottom) should also be measured in px. The middle should be at least 100% height of the body minus the height of the top and bottom parts (measured in px!), with the ability to grow in height. I've already found the solution with one big div with negative margins and placeholder for footer, but this only makes this layout looks like it should, but it isn't it. In other words, I still can't define the middle div to have the proper height (100% of the body - size of header and footer measured in px's). I need this div to apply background images to it.

    Here is complete code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    	<style type="text/css">
    		html, body
    		{
    		    height:100%;
    		    width:100%;
    		    padding:0px;
    		    margin:0px;
    		}
    		div#Layout { display:block; position:absolute; height:auto; bottom:0; top:0; left:0; right:0; margin:15px; background-color:transparent; }
    		div#Container { height:100%; height:auto !important; min-height:100%; margin-bottom:-39px; background-color:silver; }
    		div#Header { height:71px; background-color:gold; }
    		div#Body { margin:0; overflow:hidden; background-color:green; }
    		div#FooterPlaceholder { height:39px; }
    		div#Footer { height:39px; background-color:navy; }
    	</style>
    </head>
    <body>
    	<div id="Layout">
    		<div id="Container">
    		    <div id="Header">
    		    	head here
    		    </div>
    
    	        <div id="Body">
    	        	body here
    	        </div>
    
    		    <div id="FooterPlaceholder">
    		    </div>
    		</div>
    		<div id="Footer">
    			footer here
    		</div>
    	</div>
    </body>
    </html>

    as you see, the silver color is everywhere, even under header and footer so when I apply background image, it will interfere with the images of the header and footer. That's why I need the middle div which I can't define myself...

    If anyone can point me the right solution I will be greatfull,
    thanks!

  • #2
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Let me know if this works! (Adjust #Body top and bottom based on #Header and #Footer heights.)

    Code:
    <!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>
    	<title>100% height fluid layout horizontal division problem</title>
    	<style type="text/css">
    		html, body
    		{
    			height: 100%;
    			width: 100%;
    			padding: 0px;
    			margin: 0px;
    			position: relative;
    		}        
    		div#Header
    		{
    			height: 71px;
    			background-color: gold;
    		}
    		div#Body
    		{
    			position: absolute;
    			top: 71px;
    			right: 0px;
    			bottom: 39px;
    			left: 0px;
    			overflow: hidden;
    			background-color: green;
    		}
    		div#Footer
    		{
    			position: absolute;
    			right: 0px;
    			bottom: 0px;
    			left: 0px;
    			height: 39px;
    			background-color: navy;
    		}
    	</style>
    </head>
    <body>
    	<div id="Header">
    		head here
    	</div>
    	<div id="Body">
    		body here
    	</div>
    	<div id="Footer">
    		footer here
    	</div>
    </body>
    </html>

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Sorry but not really what I'm looking for. The main content in that example has height of its content, not height of the remaining space between header and footer.

    I want to have one container (a div) divided horizontaly by 3 other divs (header, content and footer). Header and footer have known height in pxs while third should be automatically stretched to fill the container. Something like on this picture:



    I have left big margins on this picture so you can see the container, but the idea is to have whole silver color filled by other divs.

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, I've found the solution. I'm now using table layout with divs and css (display:table, display:table-row, display:table-cell) etc, as tables allows height stretching (and blocks not)... I only wonder what are the downsides of such approach?

  • #6
    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 mjsw,
    See the link about tables in my signature line. It discusses the downsides a bit.

    The plus side would be that you now have a working example to show us. Link us to the test site that has your tabled layout working the way you want, that may be easier to understand than your description.
    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

  • #7
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello mjsw,
    See the link about tables in my signature line. It discusses the downsides a bit.

    The plus side would be that you now have a working example to show us. Link us to the test site that has your tabled layout working the way you want, that may be easier to understand than your description.
    Code:
    I can't put a test page yet, here is the code that works now:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    	<style type="text/css">
    html
    {
    	height:100%;
    }
    body
    {
    	margin:0; 
    	padding:0; 
    	height:100%;
    	background-color:#ffffff;
    	font-family:arial, serif; 
    }
    #layout
    {
    	background-color:white;
    	position:absolute;
    	top:0;
    	left:0;
    	right:0;
    	bottom:0;
    	margin:10px;
    }
    #kontener
    {
    	display:table;
    	width:100%;
    	min-height:100%;
    	padding:0;
    	margin:0;
    	background-color:#ededed;
    }
    #header
    {
    	display:table-row;
    	background-color:gold;
    }
    #header-content
    {
    	display:table-cell;
    	height:71px;
    }
    #content
    {
    	display:table-row;
    	background-color:red;
    }
    #content-content
    {
    	display:table-cell;
    }
    #footer
    {
    	display:table-row;
    	background-color:blue;
    }
    #footer-content
    {
    	display:table-cell;
    	height:39px;
    }
    
    </style>
    </head>
    <body>
    <div id="layout">
    	<div id="kontener">
    		<div id="header">
    			<div id="header-content">
    			</div>
    		</div>
    		<div id="content">
    			<div id="content-content">
    			</div>
    		</div>
    		<div id="footer">
    			<div id="footer-content">
    			</div>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    If anyone can make the same effect without using display:table I will appriciate sharing with me...


  •  

    Posting Permissions

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