Forum Moderators: not2easy
QUESTION :
-I HAVE 3 PAGES. I HAVE A CONTAINER DIV AND 3 DIV’S INSIDE THAT CONTAINER DIV.
-THE POSITION OF THE CONTAINER DIV IS RELATIVE. AND THE 3 DIVS INSIDE CONTAINER DIV ARE POSITONED ABSOLUTE.
-FOOTER DIV IS BELOW THE CONTAINER DIV.
-IN THE CSS, I HAVE GIVEN THE CONTAINER DIV A HEIGHT AS IT IS RELATIVELY POSITIONED. SAY HEIGHT: 500 PX;
-THIS IS FOR THE HOME PAGE.
-BUT FOR THE 2ND PAGE, WHICH IS LONGER THAN THE HOME PAGE, THE HEIGHT REMAINS 500 PX; AND IF I CHANGE IT, IT CHANGES IN THE HOME PAGE ALSO. NOW IF I REMOVE HEIGHT AND MAKE IT AUTO OR 100%, IT REMOVES THE ABSOUTE POSITIONING PROPERTY.
- SO I HAVE TO MAKE A NEW CONTAINER DIV FOR EVERY PAGE AND GIVE EVERY PAGE A DIFFERENT HEIGHT.
-IS THERE A WAY TO DO AN AUTO HEIGHT FOR RELATIVE AND ABSOLUTE POSITIONING.
-IF YES, HOW?
Thank you.
Aniket.
That said, in your example you don't actually need to use a different container div for every page, you just need a mechanism for targeting the container on a given page. I would recommend giving your <body> element a unique id value for each of your pages. In the example below, try changing the body id from "home" to "page2":
<html>
<head>
<title>Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
background: #ccc;
padding: 50px;
}
#container {
position: relative;
background: #c00;
width: 620px;
}
#home #container {
height: 100px;
}
#page2 #container {
height: 700px;
}
#nav {
background: #0c0;
position: absolute;
top: 5px;
left: 5px;
width: 200px;
}
#content {
background: #00c;
position: absolute;
top: 5px;
left: 210px;
width: 200px;
}
#sidebar {
background: #0c0;
position: absolute;
top: 5px;
left: 415px;
width: 200px;
}
#footer {
background: #666;
padding: 50px;
}
</style>
</head>
<body id="home">
<div id="header">HEADER</div>
<div id="container">
<div id="nav">NAV</div>
<div id="content">CONTENT</div>
<div id="sidebar">SIDEBAR</div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
