Sat, 2006-01-21 22:26
I have managed to get my 2 bars to use the whole height of the page in IE but not mozilla.
This is the code:
.rightside {
background: url(sidebar_01.jpg) top right repeat-y;
float:right;
height:100%;
}
.leftside {
background: url(sidebar_02.jpg) top right repeat-y;
float:left;
height:100%;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #006699;
height:100%;
border:none;
}
Any reason that it wont work in mozilla but will in ie?
Sat, 2006-01-21 22:44
#1
100% height
I'm not 100% sure, but I think you need
html,body {height: 100%;}
for it to work (altho I think there might be some bugginess in IE/mac).
larmyia
Sat, 2006-01-21 22:47
#2
100% height
Won't work on floats without some width, and you would need the height:100% declared on the html, body under normal circs.
Hugo.
Sun, 2006-01-22 00:25
#3
100% height
I had done the html,body {height: 100%;} but it made no difference so I took it out. But it needs that and the widths to work.
.rightside {
background: url(sidebar_01.jpg) top right repeat-y;
float:right;
height:100%;
width:16px;
}
.leftside {
background: url(sidebar_02.jpg) top right repeat-y;
float:left;
height:100%;
width:16px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #006699;
height:100%;
border:none;
}
html,body {height: 100%;}
Works 
Sun, 2006-01-22 11:51
#4
100% height
which is what hugo said :roll:
Sun, 2006-01-22 12:23
#5
100% height
I kno, I just posted the whole working code so if someone else had the same problem and wanted to know the answer they could just look at the end result rather than reading through everything.
Sun, 2006-01-22 14:38
#6
Does this replace faux columns?
Is this a new method which means you can do away with Dan Cederholmes Fax Columns?
From what I am reading using this method I can create a 2 column layout and force them to 100% height applying a background to each ... is this right?
Sun, 2006-01-22 14:52
#8
Re: Does this replace faux columns?
webbedit wrote:
Is this a new method which means you can do away with Dan Cederholmes Fax Columns?
From what I am reading using this method I can create a 2 column layout and force them to 100% height applying a background to each ... is this right?
Sure you can. But thats not what you want to do. What you want is the columns to be (apparently) equal height. Try the above when one of the columns is larger than 100% (needs more space than the viewport or whatever its container is).
Sun, 2006-01-22 15:32
#9
100% height
In other words it the equal height that's the problem, you can get 100% of the viewport but if then one column exceeds that through content what does the other do? thats why the faux column trick works on a container that is always the height of the longest column.
It's a sadness but CSS height implementation isn't all it could be.
Sun, 2006-01-22 15:33
#10
100% height
@Chris: so this is not a direct replacement for the Faux Columns hack/trick?
I have used the faux columns on http://adesignassociation.org.uk/ and in firefox when there is no scrollbar, or if you slowly alter the window size you can see it has problems calculating where center is on the page and you keep getting a pink line to the right of the tel no. at the top of the page.
Sorry if I'm moving off topic here but I guessed this is why the guy was trying to get full-height (100%) columns