Forum Moderators: not2easy
I put that column within a wrapper with a width of 100% and then I set main column's width to 100% as well, wich I think should stretch it to the width of the containing div. It works fine in the Explorer, but Firefox actually thinks that 100% is the width of the viewing area, which stretches the column way to the right and breaks the whole layout.
I can't figure out what am I doing wrong..=( Any help will be greatly appreciated!
Doctype is "strict".
[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]
HTML:
<body>
<div id="header">
<!--horizontal nav-->
<div id="menu">
Menu items
</div>
</div>
<div id="wrapper">
<div id="home">Some text</div>
</div>
</body>
CSS:
body, html {
height: 85%;
}
#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
text-align: center;
}
#wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 131px;
}
#home {
height: 663px;
position:relative;
top: 8px;
left: 50%;
margin-left: -150px;
height: 100%;
width: 100%;
}
[edited by: createErrorMsg at 5:51 pm (utc) on Oct. 30, 2005]
What Firefox thinks is correct, 100% is the width of the viewport (or that wrapper)
Using position relative, the UA actually is supposed to reserve the correct amount of space just move the element by how much you've requested.. so the width 100% is preserved moving it will not change that.
However what IE's is doing I just don't know ;)
The way I would've tackled something like this would be to absolutely position that div and instead of width use the right co-ordinate : right: 0; which makes compliant browsers auto calculate the width (as per specs).. however IE doesn't like this method and using width 100% for it makes it replicate what FF is doing now ;) ~ the answer then would be to use some form of script or IE expression to get IE to calculate the width properly
I don't think I've actually seen this before.. but this means that it is possible using two different lots of CSS code? - in this case anyway, and as long as no footer then becomes involved
#home {
position: absolute;
right: 0;
top: 8px;
left: 50%;
margin-left: -150px;
height: 100%;
background: #eee;
}/* for IE only */
* html #home {
position: relative; width: 100%;
}
can't say what would happen in IE/Mac..
Suzy
