Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="PADDING:0px 0px 0px 0px;MARGIN:0px 0px 0px 0px;overflow:hidden">
<body style="PADDING:0px 0px 0px 0px;MARGIN:0px 0px 0px 0px;BACKGROUND-COLOR:#FFFFFF">
<div id="main" style="PADDING:0px 0px 0px 0px;POSITION:absolute;width:500px;height:100px">
<div id="window" style="BORDER-TOP:#D8D0DD 1px solid;PADDING:2px 2px 2px 2px;LEFT:0px;BORDER-RIGHT:#D8D0DD 1px solid;BORDER-LEFT:#D8D0DD 1px solid;TOP:0px;BACKGROUND-COLOR:#ff0000;BORDER-STYLE:Solid;BORDER-WIDTH:1px;HEIGHT:100%;POSITION:absolute;WIDTH:100%;BORDER-BOTTOM:#D8D0DD 1px solid;">
<div id="header" style="LEFT:0px;TOP:0px;BORDER-WIDTH:0px;BORDER-STYLE:None;POSITION:relative;HEIGHT:23px;">
Title (header)
</div>
<div id="content" style="BORDER-TOP:#D8D0DD 1px solid;PADDING:2px 2px 2px 2px;BORDER-RIGHT:#D8D0DD 1px solid;BORDER-LEFT:#D8D0DD 1px solid;MARGIN:-23px auto 0;TOP:23px;BORDER-STYLE:Solid;BACKGROUND-COLOR:#f0f0f0;OVERFLOW:auto;BORDER-WIDTH:1px;HEIGHT:100%;POSITION:relative;WIDTH:auto;BORDER-BOTTOM:#D8D0DD 1px solid;">
ContentsContentsContents<br/>
Contents<br/>
Contents<br/>
Contents<br/>
</div>
</div>
</div>
</body>
</html>
I can workaround it by setting bottom padding for "window" div to, let's say, a value of 31 (the header height plus some paddings). It works fine when the main div is set to a fixed px value. But in this case another problem arises: when "main" div's height is set to 100%, in order to fill the page, padding gets hidden in the bottom of the page and a vertical scrollbar appears. If I get rid of the vertical scrollbar by setting "overflow:hidden" to page's body (or to whatever tag contains the whole window), "content"'s horizontal scrollbar, which would show when inside html overflows on the right (overflow:auto), is hidden because it is below the end of the page (and horizontal scrollbar's "down" arrow is partially hidden, too).
Is there a way to set a div so that it is something like "100% - 23px"?
I know the question has been asked thousands of times. I've read thousands of posts on this argument, but, believe me, I could not get a solution that suites for me. I've been reading CSS specs, seen lots of examples, but no way. I've also tried with some javascript to dynamically resize things, but I would really avoid this solution because it is really weird.
I am trying to use box model as much as possible, avoiding the use of tables for layout. Since page must be validated, I need the doctype declaration on top of it (and I would preffer strict instead of transitional), thus I can't use IE quirks mode (which probably would solve the problem!), and my targets are IE7 and FF2.
Many thanks in advance,
Pier
Welcome to WebmasterWorld!
One thing I see right away is how you are doing your styles.
If you want your styles embedded into your page, here is how you would do it (remove the styles from your html as you have it right now)
You would place your styles within this section of code, below your <head> tag.
Here is an example of a header of code with the styles that you have:
<!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" lang="en" xml:lang="en">
<head>
<title>Navigation</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
/*removes all browser defaults with margins, paddings and borders*/
}
html {/*no need to add the margin and padding zeroed out since you have already done it globally with the " * " above*/
overflow:hidden;
}
body {
background-color:#FFFFFF;
}
/#main {position:absolute;
width:500px;
height:100px
}
</style>
</head>
<body>
</body>
</html>
As you can see, the styles are within the style code as it should be for an embedded style sheet.
this makes it easier to find your styles to change them if you need to.
I started the code for you, all you need to do is go through what you have and continue under where I left off. If you have any problems, just post here. Once you get it straightened out, then try the page.
If you are using percentage heights, make sure you establish containing boxes for things you want percentages of, as well as establishing the base height of html and body as 100% (html,body{height:100%}
Making a containing box is like overflow:auto. It will use it as the reference, instead of the top level element.
