Forum Moderators: not2easy
[snipped]
This is what i want.
But what is my problem? My problem is that i don't know how to make content div 100%. If i put there 100% it will push footer to somewhere and there is scroll.
index.php
<!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>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'> @import url(style.css); </style>
</head><body>
<div id="borders">
<div id="left_shadow">left</div><div id="center">
<div id="logo">logo</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div><div id="right_shadow">right</div>
</div></body>
</html>
style.css
body, html {
margin: 0px;
padding: 0px;text-align: center;
height: 100%;
font: 12px/18px arial, verdana, sans-serif;
color: #353535;background-color: #EEDFBE;
}#borders {
width: 784px;
height: 100%;
margin: 0px auto;
}#left_shadow {
background: lightyellow;
width: 22px;
height: 100%;
float: left;
}#right_shadow {
background: lightyellow;
width: 22px;
height: 100%;
float: left;
}#center {
background: lightgreen;
width: 740px;
height: 100%;
float: left;
}#logo {
background: lightgreen;
width: 740px;
height: 180px;
float: both;
}#menu {
background: #FF7B11;
width: 740px;
height: 30px;
float: both;
}#content {
background: lightgreen;
width: 740px;
height: 73%;
float: both;
}#footer {
background: #FF7B11;
width: 740px;
height: 20px;
float: both;
}
[edited by: SuzyUK at 1:28 pm (utc) on Mar. 13, 2006]
[edit reason] no urls thanks, see TOS linked at bottom of page [/edit]
we should not link to URLs that may change or get removed/fixed as this means the discussion here would no longer make any sense to others who may read at a later date..
however let me try to describe in words what you want (taken from the image)..
<logo> - 100% wide - 180px height
<menu> - 100% wide - 30px height
<content> - 100% wide - ?
<footer> - 100% wide - 20px height
with the ? = to 100% page height minus 230px.
(if that interpretation is not right then let us know)
----------
100% height refers to the parent element, which can only calculate if that element can inherit from the root element which is the screen/page height - so providing you have html, body set to 100% and a clear chain of inheritance down to the <content> level the content will be 100% of the screen - but the whole page will be 100% PLUS 230px therefore scrolling will be produced.
There have been a few attempts at working around this but it depends what effect you are after really.. i.e. do you want the content to stretch if it is longer than a specified height could contain or do you want a scrollbar to only appear on the content section?
some library threads which might help
Emulating frames [webmasterworld.com]
CSS 100% height DIV's Tutorial [webmasterworld.com]
You can also use Absolute positioning with a little CSS Height expression thrown in for IE sometimes which may do?
Suzy
