Forum Moderators: not2easy
Here's the html (you can simply copy-paste it):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257" />
<title>Administrative Interface</title>
<style type="text/css">
html
{
margin: 0;
width: 100%;
height: 100%;
}
body
{
background-color: #E6E6E6;
font-family: verdana;
font-size: 0.8em;
display: table;
color: #000000;
margin: 0;
width: 100%;
height: 100%;
}
.light_bg
{
border: 1px solid #C4DBE1;
background-color: #E1EDF0;
}
#container
{
display: table-cell;
vertical-align: middle;
}
#content
{
display: table;
margin: 0 auto;
}
#header
{
width: 100%;
height: 4.8em;
margin-bottom: 10px;
}
#menu
{
float: left;
text-align: left;
height: 100%;
padding: 10px;
}
#page
{
float: right;
width: 700px;
height: 390px;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="header" class="light_bg"></div>
<div id="menu" class="light_bg">adjavhdvahdafwfw</div>
<div id="page" class="light_bg"></div>
</div>
</div>
</body>
</html>
You can see that #page and #header have missing borders. Another problem is that if you increase font size (in your browser), the layout gets screwed up.
I would be glad if someone could explain me what is wrong with my code and how I could fix it. It's such a simple thing, but somehow it doesn't work right...
For example:
You do not heed a html selector here
display:table seems unnessesary
the container and content divs seem to be doing nothing.
Not floating the page div, but instead giving it a left margin and removing its height will stop it dropping down the page when at higher res/smaller screens. 700px is too wide, it will fall off the edge.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1257" />
<title>Administrative Interface</title>
<style type="text/css">
body
{
margin: 0;
background-color: #E6E6E6;
font-family: verdana;
font-size: 0.8em;
color: #000000;
margin: 0;
width: 100%;
height: 100%;
}
.light_bg
{
border: 1px solid #C4DBE1;
background-color: #E1EDF0;
}
#header
{
width: 100%;
margin-bottom: 10px;
}
#menu
{
float: left;
text-align: left;
height: 100%;
padding: 10px;
}
#page
{
height: 390px;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="header" class="light_bg">header</div>
<div id="menu" class="light_bg">menu</div>
<div id="page" class="light_bg">page</div>
</body>
</html>
I took a lot of it out and it seems to work fine now, but as I said I don't know what you are after to the bits I removed may have some function I am not seeing.
Use this as a starting point and see who you go.
here are a few comments:
You do not heed a html selector here
I do. Otherwise, the layout won't be centered vertically.
display:table seems unnessesary
I think it is, in both body and #content. For body it is there because #container is table-cell, and for #content it allows centering the content inside it horizontally without knowing its actual width.
the container and content divs seem to be doing nothing.
They do something. :). #container centers the layout vertically, #content - horizontally.
If I'm incorrect somewhere, please point that out. ;)
Also according to my idea, #menu and #header should have no fixed width, #page should have both width and height fixed. The idea is to allow text to be resized (via browser), so #menu would shrink to accomodate the text within it (#header woudl also shrink accordingly).
It seems very easy, but somehow it just doesn't work...
I do not believe that what you are trying to do, at least the way you are approaching it, will work in IE, or at least not without multiple hacks.
Maybe that doesn't matter?
One problem is your header is listed as 100% width; When you resize the font, the header is the only thing keeping the content div the width that it is. So the page div can't fit when the font is enlarged so it disappears off the screen somewhere. If you set #header to 100%, that solves that part of the problem.
