6 replies [Last post]
AmeriBlog
Offline
newbie
Last seen: 17 years 35 weeks ago
Joined: 2004-01-17
Posts: 4
Points: 0

Here's what I'm trying to do:

One main area, #main. It's set to be centered, at 80% window width, with a 2px border.

Inside of that, I want to different areas: #leftnav and #blogcontent

What I am getting is the #blogcontent area outside, actually directly above, the #main area. The #leftnav area is in the correct place. Here's my code, can someone please help me?

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Centered Column Layout</title>
  <link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body topmargin="0" leftmargin="0">

<div id="main">
	<div id="leftnav">
		<h1>Sidebar</h1>
	</div>
	<div id="blogcontent">
		<h1>Sample Content</h1>asdfasdfasdfasdfasdfsadfadsff
	</div>
</div>
</body>
</html>

CSS Code

body {
  background-color : #cccccc;
  color : #000000;
  text-align : center;
  margin-top : 50px;
  vertical-align : middle;
}
#main {
	width : 80%;
  margin-right : auto;
  margin-left : auto;
  margin-top : 30px;
  border : 2px solid #000000;
  background-color : #ffffff;
  padding : 5px;
  text-align : left;
}
#blogcontent {
  background-color : #ffffff;
  position : absolute;
  left : 160px;
  top : 0px;
}
#leftnav {
  position : fixed;
  width : 150px;
  height : 100%;
  margin-right : 10px;
  background-color : #ffffff;
}

MUCHO THANKS!

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 17 years 36 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

Having Troubles with CSS/XHTML

CSS:

body {
background-color: #cccccc;
text-align: middle;
margin-top: 50px;
}

#main {
width: 80%;
margin: auto;
margin-top: 30px;
border: 2px solid;
background-color: #ffffff;
padding: 5px;
text-align: left;
}

#leftnav {
width: 150px;
float: left;
}

#blogcontent {
margin-left: 160px;
}

This is the effect that I think you are aiming for...but I may be wrong. Tell me if I'm off track. Basically I trimmed it down a bit and got rid of the absolute positioning...

http//mark.axsysdesign.com

AmeriBlog
Offline
newbie
Last seen: 17 years 35 weeks ago
Joined: 2004-01-17
Posts: 4
Points: 0

Having Troubles with CSS/XHTML

Thanks, worked great.

Smile

Going to try and add a <div> above #main. same size, just don't want the border to be around it.

It'll be the header area, I want it to be 100px high.

Does this look right:

#title { 
width: 80%;
height: 100px;
margin: auto;
background-color: #ffffff; 
padding: 5px; 
text-align: left; 
} 

AmeriBlog
Offline
newbie
Last seen: 17 years 35 weeks ago
Joined: 2004-01-17
Posts: 4
Points: 0

Having Troubles with CSS/XHTML

hm, tried this. and just simply added:

<div id="title"></div>

But it didn't look how I wanted it. I wanted the #title directly on top of the #main, but I am getting a good bit of space in between. I tried taking out the margin-top: 30px; on #main, but still didn't work.

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 17 years 36 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

Having Troubles with CSS/XHTML

Try setting the margin-bottom to 0px in #title and margin-top to 0px in #main. I do not know about the default settings of margins with divs, but I know that it is not 0px.

http//mark.axsysdesign.com

AmeriBlog
Offline
newbie
Last seen: 17 years 35 weeks ago
Joined: 2004-01-17
Posts: 4
Points: 0

Having Troubles with CSS/XHTML

worked man, thanks.

Smile

markaxsysdesign
markaxsysdesign's picture
Offline
Regular
Toccoa, Georgia
Last seen: 17 years 36 weeks ago
Toccoa, Georgia
Joined: 2004-01-09
Posts: 42
Points: 0

Having Troubles with CSS/XHTML

No problem, glad to help Laughing out loud

http//mark.axsysdesign.com