2 replies [Last post]
dbe1996
Offline
newbie
Last seen: 17 years 20 weeks ago
Joined: 2003-12-29
Posts: 2
Points: 0

I am working on a new site design in which I'm migrating from a three-column to a two-column approach. But I'm not getting something right in my css styles. Wondering if anyone can point out the source of my error.

Here's the URL: http://www.kwmin.org/weblog/dev/TestWeblog1/

The problem seems to be in getting the "header," "content" and "leftbar" styles definitions working together correctly. But I'm unsure of what's wrong with them. Anyway, as you can see, things are just not positioning correctly.

Here is my css for those items:

#header{
	top:0px;
	left:0px;
	position:static;
	height:80px;
	min-height:80px;
	max-height:80px;
	width:100%;
	font-size:4px;
	z-index:1;

#content{
	float:right;
	position:static;
	width:60%;
	color:#8F6654;
	background:#FFF;
	margin-right:20px;
	margin-top: 215px;
	margin-bottom: 20px;
	z-index:2;
}

#content ul{
  list-style:none;
}

#content li{
  margin-top: 4px;
  margin-bottom: 4px;
}

#leftbar{	
	float:left;
	position:static;
	width: 180px;
	top:215px;
	left:0px;
	color:#8F6654;
	margin: 0px 0px 0px 8px;
	background-color:#FFF;
	height:100%;
	z-index:3;

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 26 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Unruly two-column design

Please provide a brief description of what layout you are trying to achieve, because it looks fine based on your CSS, but obviously is not what you want.

The natrural flow of html is from top left to bottom right (top to bottom - left to right)

From what I can see you have placed the content first. probably so you can get better search engine results. I would suggest you then want to move the header back up over the content, but it would be better if you explained it.

A couple of things -
1) top: 0px; left: 0px; do not work for position: static or relative, only position: absolute; or position: fixed; (fixed is not really supported by IE).
2) It is not a good idea to float something and have postion: static; You should use position: realtive. Worse case would be that a compliant browser would leave a space where the div was originally floated from.

Regards
Day

The only way to learn is to do it yourself

dbe1996
Offline
newbie
Last seen: 17 years 20 weeks ago
Joined: 2003-12-29
Posts: 2
Points: 0

Unruly two-column design

You said,

Quote:
I would suggest you then want to move the header back up over the content, but it would be better if you explained it.

Yea, that's the problem. No matter what I do, I can't seem to get the header back up over the content. Not sure why. Do you see the problem?

Thanks also for the additional insights on right use of "position." Laughing out loud