Hi,
If you can look at the code below : -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style>
/****************************************/
/*Tags*/
/****************************************/
html, body {
margin: 0;
padding: 0;
height: 100%;
}
/****************************************/
/*ID Tags*/
/****************************************/
#left {
position:absolute;
height: 100%;
width: 134px;
left: 0px;
background-color:#87AEC5;
z-index: 1;
}
#right {
position:absolute;
height: 100%;
width: 151px;
border-left-width: 0.1em;
border-left-style:dashed;
border-left-color:#CCCCCC;
right: 0px;
z-index: 1;
}
#middle {
position:absolute;
height: 800px;
width:600px;
left:140px;
right: 160px;
background-color:#000000;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>
Ok, i have set the middle div's height 800px, bigger than the view port, and the two side divs dont increase? why is that.
thanks
k0r54As you've implemented it, each DIV is a separate entity. The left or right DIV would only expand in relation to the middle DIV if it contained the middle DIV.mmm so how exactly could i do that?
I see what you mean but to get that effect?
im not sure
Thanks
k0r54Hi,
Ok i now have this but i have three problems.
1. The right div doesn't go NEXT to the content div,
2. How can i make the content div to ALWAYS be 100% of the main div regardless if the content div goes over the viewport.
3. in Firefox it doesn't push down the main div if the right or content div goes over the viewport size.
Here is the code, any help will be great lol i have been workin on this for bout 20 odd hours lol
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style>
/****************************************/
/*Tags*/
/****************************************/
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color:#87AEC5;
}
/****************************************/
/*ID Tags*/
/****************************************/
#main {
background-color:#FFFFFF;
border-left-color:#000000;
border-left-style:solid;
border-left-width: 0.1em;
height:100%;
margin-left: 134px;
}
#content {
position:relative;
border-right-color:#999999;
border-right-style:dashed;
border-right-width: 2px;
margin-right:150px;
height:400px;
}
#right {
height:250px;
background-color:#3333CC;
width:150px;
float:right;
}
</style>
</head>
<body>
<div id="main">
<!-- Main Content -->
<div id="content"></div>
<!-- Right Menu -->
<div id="right"></div>
</div>
</body>
</html>
Thanks
k0r54
If you can look at the code below : -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style>
/****************************************/
/*Tags*/
/****************************************/
html, body {
margin: 0;
padding: 0;
height: 100%;
}
/****************************************/
/*ID Tags*/
/****************************************/
#left {
position:absolute;
height: 100%;
width: 134px;
left: 0px;
background-color:#87AEC5;
z-index: 1;
}
#right {
position:absolute;
height: 100%;
width: 151px;
border-left-width: 0.1em;
border-left-style:dashed;
border-left-color:#CCCCCC;
right: 0px;
z-index: 1;
}
#middle {
position:absolute;
height: 800px;
width:600px;
left:140px;
right: 160px;
background-color:#000000;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>
Ok, i have set the middle div's height 800px, bigger than the view port, and the two side divs dont increase? why is that.
thanks
k0r54As you've implemented it, each DIV is a separate entity. The left or right DIV would only expand in relation to the middle DIV if it contained the middle DIV.mmm so how exactly could i do that?
I see what you mean but to get that effect?
im not sure
Thanks
k0r54Hi,
Ok i now have this but i have three problems.
1. The right div doesn't go NEXT to the content div,
2. How can i make the content div to ALWAYS be 100% of the main div regardless if the content div goes over the viewport.
3. in Firefox it doesn't push down the main div if the right or content div goes over the viewport size.
Here is the code, any help will be great lol i have been workin on this for bout 20 odd hours lol
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style>
/****************************************/
/*Tags*/
/****************************************/
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color:#87AEC5;
}
/****************************************/
/*ID Tags*/
/****************************************/
#main {
background-color:#FFFFFF;
border-left-color:#000000;
border-left-style:solid;
border-left-width: 0.1em;
height:100%;
margin-left: 134px;
}
#content {
position:relative;
border-right-color:#999999;
border-right-style:dashed;
border-right-width: 2px;
margin-right:150px;
height:400px;
}
#right {
height:250px;
background-color:#3333CC;
width:150px;
float:right;
}
</style>
</head>
<body>
<div id="main">
<!-- Main Content -->
<div id="content"></div>
<!-- Right Menu -->
<div id="right"></div>
</div>
</body>
</html>
Thanks
k0r54