CSS Forum

**march11** · 08-03-2009, 06:47 AM

I'm trying to design a layout in which I'll have a container on either side of the screen which will just be sort of bold and gray. In any case, my percentages will NOT show up. Is there some problem with my CSS? I'm growing quite frustrated and don't know what to do. Here is the CSS I'm using to create a 50% all-black sidebar. I figure if I can make these percentages work then I can figure out everything else.

CSS:

{
margin: 0;
padding: 0;
}

body {
background: #FFFFFF;
text-align: justify;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #666666;
margin: 0px;
z-index: 0;
width: 100%;
height: 100%;
}

#left {
width: 50%;
height: 50%;
margin: 0 auto;
background: #000000;
z-index: 1;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TEST</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="left">
</div>

</body>
</html>

All I get is a blank white screen. I'm using Safari as a browser. What am I doing wrong!?

**KellyAX** · 08-03-2009, 07:55 AM

Works for me, firefox. Maybe you did something wrong, like placed your stylesheet in another folder, idk.

**LadynRed** · 08-03-2009, 09:41 AM

Ok, z-index is useless on non-positioned elements, it ONLY works when something is set to position:absolute or relative.

The 100% height won't work properly unless you do it this way:
html, body{height:100%}

The width:100% on the body is pointless as that is the default.

Using margin: 0 auto; on #left won't put it to the left side, it will CENTER it on the screen.

**pdjprateek** · 08-05-2009, 11:27 PM

As LadynRed says margin: 0 auto; is useless, she is absolutely right there.

Try this inside your #left div.

left: 0;
margin-left: 0;

I really dont know if this will word out, but i think it should.

Prateek,
PDJSolutions

**LadynRed** · 08-06-2009, 09:46 AM

Quote:

As LadynRed says margin: 0 auto; is useless

That is NOT what I said! Read my reply again.

Quote:

left: 0;
margin-left: 0;

If he want's it on the LEFT then margin-left: 0, would be sufficient, the left property is overkill.

**pdjprateek** · 08-06-2009, 01:29 PM

Hehe, chill you know, i just meant that in this case its useless

. Because margin: 0 auto; would center the div as we are setting the left and right margin to auto there.

Anyways thanks for the info "left property is overkill"

- i get confused b/w both sometimes.