CSS Forum

**march11** · 08-03-2009, 01:52 PM

I'm trying to use something like this in my CSS, to make 4/5 of the page a gradient and the other half white (for the text) below.

The CSS:

html, body {height:100%)

body {
background: #FFFFFF url(gradient.jpg) repeat-x;
text-align: justify;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #666666;
}

#bottom {
position: fixed;
border-top: 5 px solid yellow;
margin-top: 400px;
height: 20%;
background-color: white;
z-index:1;
}

HTML:

<html>
<head>
<link REL=StyleSheet HREF="styles.css" TYPE="text/css" MEDIA=screen>
<body>
<div id="bottom"></div>
</body>
</head>
</html>

Is there an easier way to accomplish this? I didn't think it would be quite this hard.

**LadynRed** · 08-03-2009, 02:37 PM

It isn't, but with NO content, the bottom section is going to appear near the top of your page, and position:fixed isn't going to cut it.

You might be better off setting a min-height on a "wrapper" div that's just a tad taller than your gradient, then the white of the body after the gradient will kick in, and the bottom section can go in after the wrapper or after the div holding the content.

**march11** · 08-03-2009, 02:45 PM

I'm a newbie, so I'm sorry for being so dense =/ Do you mean adding a container around the background gradient, somehow? How would I go about doing something like that? Or will the bottom white container go down to where it should be when the content is added (text and other containers possibly).

**LadynRed** · 08-03-2009, 07:45 PM

What I mean is:

You have this:

Code:

<head>
<link REL=StyleSheet HREF="styles.css" TYPE="text/css" MEDIA=screen>
</head>
<body>
<div id="bottom"></div>
</body>

and what I was referring to is like this:

Code:

<head>
 <link REL=StyleSheet HREF="styles.css" TYPE="text/css" MEDIA=screen>
</head>
 <body>
 <div id="wrapper">
put your content iand other divs in here
</div> <!-- close wrapper -->
<div id="bottom"></div>
 </body>