CSS question

st00dent · 11 Aug 2007 at 11:11

Hi, I'm trying to make a div with a 2 colour background (top half one colour bottom half another). I know I could do it with a small gif and tile it horizontally, but if the user then changes the text size, it will go **** up as the image will be a fixed height. Is there a better way of doing this purely with css so it can scale up?
Cheers.

Tripnologist · 11 Aug 2007 at 14:31

There's nothing I can think of. At least not with pure CSS.

psyr33n · 11 Aug 2007 at 14:53

2 divs?

Cheetah Designs · 11 Aug 2007 at 15:27

psyr33n said:
2 divs?

Edit:

index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Split Divs</title>
	<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
	<div id="cont">
		<div id="top">
			Top Div
		</div>
		<div id="bottom">
			Bottom Div
		</div>
	</div>
</body>
</html>

style.css

Code:

*,html{margin:0;padding:0}
#cont{width:780px;height:400px;margin:0 auto}
#top{height:50%;background:#ff0}
#bottom{height:50%;background:#f00}

st00dent · 11 Aug 2007 at 17:22

Sorry, didn't explain that well. I'm trying to get one line of text to cover both divs.

Cheetah Designs · 11 Aug 2007 at 18:16

Maybe have another DIV layered ontop? (z-index)

Can't really help untill we see a site with the problem?

LazyManc · 11 Aug 2007 at 19:26

It's doable using an un-cleared float but it's hacky...

http://www.lazymanc.com/floatTest.html