[RESOLVED] css

vang

hi,
how to create a webpage using css with the following display properties:
- webpage is divided into 3 rows: header, body & footer.
- each row is divided into left area & right area.
- body is able to expand further (downwards) when we display DB data

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x header x header
x left area x right area
x x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x body x body
x left area x right area
x x
x x
x x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x footer x footer
x left area x right area
x x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

johanafm

You can accomplish this using floats. Another option would be to have three tables: one for header, one for body, one for footer. Also, 50% width as I've used below will not work if you have a border since both left and right floating divs will then no longer fit.

Absolutely positioned elements will not expand if their contents need more space. Relatively positioned elements need to know the height of the previous element to move it back up sufficiently.

<div style="float: left; border: none; width: 50%; margin: 0px; padding: 0px;">
header left
</div>
<div style="border: none; width: 50%; float: right; margin: 0px; padding: 0px;">
 header right<br/>
 header right<br/>
 header right<br/>
</div>
<br style="clear: both;"/>

<div style="float: left; border: none; width: 50%; margin: 0px; padding: 0px;">
body left<br/>
body left<br/>
body left<br/>
body left<br/>
</div>
<div style="border: none; width: 50%; float: right; margin: 0px; padding: 0px;">
 body right
</div>

thatsquirrel

Just for fun, here is another example, taken from one of my projects:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css">
/* These styles will create a two column format with a header stacked on 
top and a footer stacked on the bottom. In this example, the page height 
is fixed, but you could make it fluid by omitting the "height" specification 
in the "copy" style. Also, this example uses the "leftcolumn" style for a 
vertical navigation menu.  It could be made wider in order to use it for 
regular text.  You could also easily add a navigational menu into the header. */
body {
	text-align: center;    /* The centering in the body tag is solely for Internet Explorer, because it incorrectly interprets some of the css */
	height: 100%;
	padding: 0;
	background-color: #2E1008;  /* This background color matches the edges of the background image, so that it blends seamlessly */
}
#contentwrapper {
	width: 900px;
	height: 700px;
	margin: 0px auto;    /* This centers the content on the html page */
	text-align: left;    /* This forces the default text alignment to be left, since we centered it in the body tag */
	background-image: url(background.jpg);   /* The background image is 900px wide */
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
}
#header {
	height: 90px;
	width: 900px;
}
#maincontent {
	width: 900px;
	margin: 0px auto;
	text-align: left;
}
#maincontent.h1, #maincontent.h2 {
	color: #FFFFFF;   /* white */
}
#leftcolumn, #leftcolumn.li {
	float: left;
	width: 90px;
	font-family: "Arial Narrow", Verdana, Geneva, sans-serif;
	font-size: 12px;
	text-align: left;
	padding-top: 50px;
	margin-left: -33px;
	color: #2E1007;
}
#copy {
	width: 730px;
	overflow: auto;
	height: 360px;
	margin-left: 136px;
	padding-left: 15px;
	padding-right: 15px;
}
#footer {
	width: 476px;
	font-size: 16px;
	color: #DCD28E;
	text-align: center;
	margin-left: 230px;
	margin-top: 65px;
	vertical-align: middle;
	overflow: hidden;
	height: 112px;
}
</style>
</head>
<body>
	<div id="contentwrapper">
    <div id="header">Header logo or text</div>
		<div id="maincontent">
            <ul id="leftcolumn">
          		<li><a href="index.php">home</a></li>
                <li><a href="about.php">about us</a></li>
                <li><a href="contact.php">contact</a></li>
            </ul>
			<div id="copy">
				<h1>Heading</h1>
				<h2>Subheading</h2>
				<p>Body text</p>              

		  	</div>
		</div>
		<div id="footer">
			<p>Footer text</p>
		</div>
	</div>
</body>
</html>

vang

many thanks for your assistance.
I'm having problem earlier when the body start to extends longer. All positions was mess up.
I'll try your solution to see if it works, thanks again.

vang

hi,

i tried your code but i'm still having the same problem.

<!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" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Page Title</title>
  <style type="text/css">
/* These styles will create a two column format with a header stacked on top and a footer stacked on the bottom. In this example, the page height 
is fixed, but you could make it fluid by omitting the "height" specification in the "copy" style. Also, this example uses the "leftcolumn" style for a 
vertical navigation menu.  It could be made wider in order to use it for regular text.  You could also easily add a navigational menu into the header. */

body	{
	text-align: center;    /* The centering in the body tag is solely for Internet Explorer, because it incorrectly interprets some of the css */
	height: 100%;
	padding: 0;
	background-color: #e9e9e9;  /* This background color (#2E1008) matches the edges of the background image, so that it blends seamlessly */
}
#contentwrapper {
	width: 900px;
/*	height: 640px;	*/
	margin: 0px auto;    /* This centers the content on the html page */
	text-align: left;    /* This forces the default text alignment to be left, since we centered it in the body tag */
/*	background-image: url(background.jpg);    The background image is 900px wide */
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
/*	background-color: grey;*/
}
#header {
	height: 90px;
	width: 900px;
	color: white;
	background-color: red;
}
#maincontent {
	width: 900px;
	margin: 0px auto;
	text-align: left;
/*	background-color: purple;*/
}
#maincontent.h1, #maincontent.h2 {		color: #FFFFFF;   /* white */		}
#leftcolumn, #leftcolumn.li {
	float: left;
	width: 90px;
	font-family: "Arial Narrow", Verdana, Geneva, sans-serif;
	font-size: 12px;
	text-align: left;
	padding-top: 20px;
	margin-left: 3px;
	color: #2E1007;
/*	background-color: yellow;*/
}
#copy {
	width: 730px;
	overflow: auto;
/*	height: 360px;	*/
	margin-left: 136px;
	padding-left: 15px;
	padding-right: 15px;
	color: white;
/*	background-color: green;*/
}
#footer {
	width: 576px;
	font-size: 16px;
	color: #DCD28E;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	vertical-align: middle;
	overflow: hidden;
	height: 50px;
	background-color: orange;
}
</style>
</head>
<body>
 <div id="contentwrapper">

  <div id="header">Header logo or text
  </div><!-- End of header -->

  <div id="maincontent">
   <ul id="leftcolumn">
	<li><a href="index.php">home</a></li>
	<li><a href="about.php">about us</a></li>
	<li><a href="contact.php">contact</a></li>
   </ul><!-- End of leftcolumn -->
   <div id="copy">
    <h1>Heading</h1>
    <h2>Subheading</h2>
    <p>Body text</p>
    <p>Body text</p>
    <p>Body text</p>

   </div><!-- End of copy -->
  </div><!-- End of maincontent -->

  <div id="footer">
   <p>Footer text</p>
  </div><!-- End of footer -->

 </div><!-- End of contentwrapper -->
</body>
</html>

The footer is able to move down when there are more data displayed.
But when there is lesser data displayed( in the body text), the footer seems to go up to the middle of the page (refer to the code above).

I want the footer to stay at the bottom of the page even when there is less data in the body text and able to move down when there are more data displayed.

Can anyone show me the way to do this, thanks.

thatsquirrel

Vang,

Try the "min-height" css code: http://www.w3schools.com/CSS/pr_dim_min-height.asp

It might work if you put it in this tag:

#copy {
	width: 730px;
	overflow: auto;
	min-height: 360px;
	margin-left: 136px;
	padding-left: 15px;
	padding-right: 15px;
	color: white;
/*	background-color: green;*/
}

If not there, just test it out in other places - perhaps the tags that wrap around the "#copy" tag.