Nosilence
03-04-2013, 05:01 PM
Hello,
i need your help !! I'm near to loose my mind.
Since 1 week i try to create a boxmodel with 4 colums: Left menu fixed width - x% - main box fixed width - x%
Then a header and a foot-part with fixed hight and fixed on page (not moving by scrolling)
I search and search and can't make this "main box" ... this box shoould have the total height between head and feet, even the content not fill all this part (hope u understand what i want to say ?! :confused:) and it should be centered (x%)
Would be great if someone have a good idea ...
Thanks in advance
here the link to my testproject http://www.inno4.com/new/test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Boxmodel test</title>
<style type="text/css">
.html, body{
background: grey;
margin: 0;
padding: 0;
}
#head{
position: fixed;
top: 0px;
background: red;
width: 100%;
height: 100px;
color: white;
font-size: 30px;
text-align: center;
}
#left{
position: fixed;
background: blue;
width: 250px;
height: 100%;
top: 100px;
margin-bottom: 30px; /* this part not function */
color: white;
font-size: 20px;
text-align: center;
}
#main{
top: 100px;
left: 250px;
width: 100%;
height: 100%;
}
#content{
width: 500px;
height: 100%;
top: 100px;
left: 250px;
margin: auto;
background: white;
color: black;
font-size: 24px;
text-align: center;
}
#foot{
position: fixed;
bottom: 0px;
background: yellow;
width: 100%;
height: 30px;
color: black;
font-size: 14px;
text-align: right;
}
</style>
</head>
<body>
<div id="head">
<p>This is my header</p>
</div>
<div id="left">
<p>This is my menu</p>
</div>
<div id="main">
<div id="content">
<p>Here should come my content</p>
</div>
</div>
<div id="foot">
<p style="margin: 7px 50px;">this is my footpage</p>
</div>
</body>
</html>
i need your help !! I'm near to loose my mind.
Since 1 week i try to create a boxmodel with 4 colums: Left menu fixed width - x% - main box fixed width - x%
Then a header and a foot-part with fixed hight and fixed on page (not moving by scrolling)
I search and search and can't make this "main box" ... this box shoould have the total height between head and feet, even the content not fill all this part (hope u understand what i want to say ?! :confused:) and it should be centered (x%)
Would be great if someone have a good idea ...
Thanks in advance
here the link to my testproject http://www.inno4.com/new/test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Boxmodel test</title>
<style type="text/css">
.html, body{
background: grey;
margin: 0;
padding: 0;
}
#head{
position: fixed;
top: 0px;
background: red;
width: 100%;
height: 100px;
color: white;
font-size: 30px;
text-align: center;
}
#left{
position: fixed;
background: blue;
width: 250px;
height: 100%;
top: 100px;
margin-bottom: 30px; /* this part not function */
color: white;
font-size: 20px;
text-align: center;
}
#main{
top: 100px;
left: 250px;
width: 100%;
height: 100%;
}
#content{
width: 500px;
height: 100%;
top: 100px;
left: 250px;
margin: auto;
background: white;
color: black;
font-size: 24px;
text-align: center;
}
#foot{
position: fixed;
bottom: 0px;
background: yellow;
width: 100%;
height: 30px;
color: black;
font-size: 14px;
text-align: right;
}
</style>
</head>
<body>
<div id="head">
<p>This is my header</p>
</div>
<div id="left">
<p>This is my menu</p>
</div>
<div id="main">
<div id="content">
<p>Here should come my content</p>
</div>
</div>
<div id="foot">
<p style="margin: 7px 50px;">this is my footpage</p>
</div>
</body>
</html>