|
Dear all,
I had problem when using DIV tags to design layout. During design, i want a column height is 100%
I wrote: <div style="height:100%"></div>.
It works fine in IE but failed in Firefox.
I research so much in forums and finally, i design successfully. Now i should publish it to you. I hope that help you!
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body, p, td, li, div, html
{
font-family: arial, verdana, helvetica, monospace;
color: #000080;
font-size: small;
height:100%;
width:99%;
}
#leftspace {
float:left;
text-align: center;
width: 10%;
height:100%;
background-color:#006699;
background-repeat:repeat-y;
}
#container
{
float:left;
text-align: center;
width:78.56%;
}
#rightspace {
float:left;
text-align: center;
width: 10%;
background-color:#006699;
background-repeat:repeat-y;
height:100%;
}
#leftscroll {
float:left;
text-align: center;
width: 7px;
height:100%;
/*background-image:url(images/home_bg05.gif);*/
background-color:#ff0000;
background-repeat:repeat-y;
}
#rightscroll {
float:left;
text-align: center;
width: 7px;
height:100%;
/*background-image:url(images/home_bg04.gif);*/
background-color:#ff0000;
background-repeat:repeat-y;
}
#header {
float: left;
border: 1px solid #8690ab;
text-align: center;
height: 100px;
width: 99.8%;
}
#left {
float:left;
width: 20%;
height: auto;
border: 1px solid #8690ab;
}
#middle {
float:left;
width: 59.49%;
border: 0px solid #8690ab;
height:auto;
}
#right {
float:left;
width: 20%;
height: auto;
border: 1px solid #8690ab;
}
#footer{
float: left;
border: 1px solid #8690ab;
text-align: center;
height: 60px;
width: 99.8%;
}
-->
</style>
</head>
<body style="width:99.8%; border: 1px solid #ff0000 ">
<div id="leftspace"></div>
<div id="leftscroll"> </div>
<div id="container">
<div id="header">This is the header section</div>
<div id="left">
Category 1 <br />
Category 2 <br />
Category 3 <br />
</div>
<div id="middle">
<br />
A frequently asked question in CSS forums is how to create pages that stretch vertically to fill the browser window, regardless of the amount of content. With tables, you would nest your entire design in a table with a single cell and set both the cell and table's height to be 100 percent. With CSS, it's also quite simple and easy. In this tutorial, you will learn the basic CSS technique for making pages fill the browser window, which you can also use any time you have a div that you want to stretch to fill its parent.
<br />
</div>
<div id="right">Column 3 content </div>
<div id="footer"><br />This is the footer section<br />Mangrove CM, Vietnam </div>
</div>
<div id="rightscroll"> </div>
<div id="rightspace"> </div>
</body>
</html>
<!-- Thank you for voting to me -->
kiet vu
(-,-)am from VietNamese.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
