10 replies [Last post]
immoral giant
Offline
Regular
Last seen: 14 years 5 weeks ago
Joined: 2005-10-16
Posts: 17
Points: 0

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?

larmyia
Offline
Elder
London
Last seen: 11 years 10 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

immoral giant
Offline
Regular
Last seen: 14 years 5 weeks ago
Joined: 2005-10-16
Posts: 17
Points: 0

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 Laughing out loud

larmyia
Offline
Elder
London
Last seen: 11 years 10 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

100% height

which is what hugo said :roll:

immoral giant
Offline
Regular
Last seen: 14 years 5 weeks ago
Joined: 2005-10-16
Posts: 17
Points: 0

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.

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 9 years 51 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

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?

Paul Gardner
Partner - Webbed IT

immoral giant
Offline
Regular
Last seen: 14 years 5 weeks ago
Joined: 2005-10-16
Posts: 17
Points: 0

100% height

Yes, i have a 3 layer example here

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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).

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 9 years 51 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

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

Paul Gardner
Partner - Webbed IT