Good morning!
I'm trying to create a web page that as a div that contains all page elements and this div should occupy all available width and height except for a small margin (10px). I've done this and it works in IE6 but in Firefox two scrollbars appear and the div occupies more than it should. Is this a box model error?
Can anyone help me?
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!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>Main</title>
<style type="text/css">
/* <
Best Regards,
MigrateI wasn't aware that IE knew the difference.you could try putting in
body (
margin: 0;
padding: 0;
}
I think thats how I've fixed it in the past. Its always better to work in Firefox first then work around IE later as its IE thats interpreting things wrong....
Hope this works for you....Hello porco.
I can't do what you said beacuse I want the main div to have a border around it.
Bye,
MigrateThis works in IE and FF, the margin must be specified in %.
The scrollbar is set to auto
* {
font-family: Tahoma, Arial, Helvetica, Sans-Serif; font-size: small; color: black;
margin: 0px;
padding: 0px;
}
html, body {
height:100%;
overflow:hidden;
}
body {
background:#01385A;
}
#all {
height:100%;
margin:1%;
}
#header {
position:relative;
background:#aaa;
height:10%;
}
#left {
position:absolute;
background:#eee;
width:20%;
height:86%;
}
#center {
position:absolute !important;position:relative;
background:#ccc;
height:86%;
left:19% !important;left:0;
float:right;
width:80%;
overflow: auto;
}Hello Fang.
Thanks for your response. It resolved my problem.
Just because I don't feel very confortable with absolute and relative divs, I've change the css code to the following:
* {
font-family: Tahoma, Arial, Helvetica, Sans-Serif; font-size: small; color: black;
margin: 0px;
padding: 0px;
}
html, body {
height:100%;
overflow:hidden;
}
body {
background:#01385A;
}
#all {
height:100%;
margin:1%;
}
#header {
background:#aaa;
height:10%;
}
#left {
background:#eee;
width:20%;
height:86%;
float: left;
}
#center {
background:#ccc;
height:86%;
float:right;
width:80%;
overflow: auto;
}
Best Regards,
Migrate
I'm trying to create a web page that as a div that contains all page elements and this div should occupy all available width and height except for a small margin (10px). I've done this and it works in IE6 but in Firefox two scrollbars appear and the div occupies more than it should. Is this a box model error?
Can anyone help me?
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!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>Main</title>
<style type="text/css">
/* <![CDATA[ */
* {
font-family: Tahoma, Arial, Helvetica, Sans-Serif; font-size: small; color: black;
margin: 0px;
padding: 0px;
}
html,body {
width: 100%;
height: 100%;
}
body {
background: #01385A;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
#all {
width: 100%;
height: 100%;
background:#8EB8D1;
}
#header {
height: 10%;
}
#left {
width: 20%;
height: 90%;
float:left;
}
#center {
width: 80%;
height: 90%;
float:right;
overflow: scroll;
}
</style>
</head>
<body>
<div id="all">
<div id="header">Header</div>
<div id="left">Nav</div>
<div id="center">Content: czxzxcxzxzczcxz zccxzccxz czcxzczx xzcxz xz xz xzxz xzc zx cc xz cxz xzc xzczx cxzc xzc fdsfdsfsdfsdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff fffffffffffffffggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggg</div>
</div>
</body>
</html>
Thanks in advance,
MigrateIn #center overflow: auto; not scrollHello Fang!
Thanks for your answer.
Your solution doesn't resolve my problem because I want the #center to scroll and not the entire page.
I want also to show the #all div with a margin around it so it has the same efect as using a table in the page that contains all page elements.
One think that is strange is that if I remove the margin from the body the page work correctly.
Thanks again,
MigrateMay not be a culprit here but is a double doctype valid? Also, doesn't floating the center and left div take them out of the flow of the all div? Just kibbutzing.Hello ray326!
Thanks for seeing that bug.
I've changed the doctype to strict mode and now it doesn't work in IE6.
It only works in Transitional mode in IE6.
Best Regards,
MigrateI wasn't aware that IE knew the difference.you could try putting in
body (
margin: 0;
padding: 0;
}
I think thats how I've fixed it in the past. Its always better to work in Firefox first then work around IE later as its IE thats interpreting things wrong....
Hope this works for you....Hello porco.
I can't do what you said beacuse I want the main div to have a border around it.
Bye,
MigrateThis works in IE and FF, the margin must be specified in %.
The scrollbar is set to auto
* {
font-family: Tahoma, Arial, Helvetica, Sans-Serif; font-size: small; color: black;
margin: 0px;
padding: 0px;
}
html, body {
height:100%;
overflow:hidden;
}
body {
background:#01385A;
}
#all {
height:100%;
margin:1%;
}
#header {
position:relative;
background:#aaa;
height:10%;
}
#left {
position:absolute;
background:#eee;
width:20%;
height:86%;
}
#center {
position:absolute !important;position:relative;
background:#ccc;
height:86%;
left:19% !important;left:0;
float:right;
width:80%;
overflow: auto;
}Hello Fang.
Thanks for your response. It resolved my problem.
Just because I don't feel very confortable with absolute and relative divs, I've change the css code to the following:
* {
font-family: Tahoma, Arial, Helvetica, Sans-Serif; font-size: small; color: black;
margin: 0px;
padding: 0px;
}
html, body {
height:100%;
overflow:hidden;
}
body {
background:#01385A;
}
#all {
height:100%;
margin:1%;
}
#header {
background:#aaa;
height:10%;
}
#left {
background:#eee;
width:20%;
height:86%;
float: left;
}
#center {
background:#ccc;
height:86%;
float:right;
width:80%;
overflow: auto;
}
Best Regards,
Migrate