Really easy question [Archive]

jessnoonyes

07-25-2007, 12:38 AM

I'm playing with CSS, trying to learn it. I've put together this so far and ran into a problem I can't figure out:
http://www.oregonblackbook.com/123/index.html

That line in the center is supposed to be aligned at the bottom so that it doesn't cross that vertical line. But I can't figure out how to do it. Any help?

Here's the code:
body
{
background-color: #000000;
}

#home-container
{

width: 800px; height: 550px; position: center; border: 6px #ffffff solid;
background-color: #BCBC8F;
}

#header
{
width: 800px; height: 120px; position: center; border-bottom-color: #ffffff;
border-bottom-style: solid;
border-bottom-width: 3px;
z-index: 2;
}

#main-home1
{
width: 400px; height: 335px; position: center; border-bottom-color: #ffffff;
border-bottom-style: solid;
border-bottom-width: 3px;

}

#main-home2
{
width: 400px; height: 440px; position: center; border-bottom-color: #ffffff;
border-bottom-style: solid;
border-bottom-width: 3px;
}

#main-home
{
width: 400px; height: 330;
border-right-style: solid;
border-right-color: #ffffff;
border-right-width: 3px;
z-index: 1;
}

Fang

07-25-2007, 02:36 AM

All your divs have their origin in the top left corner :confused:
This is possibly what you are trying to achieve:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">

</script>

<style type="text/css">
body {width:812px;margin:auto;background:#000;}
#home-container {
width: 800px; height: 550px; border: 6px #ffffff solid;
background-color: #BCBC8F;
}
#header {
height: 120px; border-bottom-color: #ffffff;
border-bottom-style: solid;
border-bottom-width: 3px;
}
#left, #side-home {float:left;}
#side-home {
}
#main-home,#main-home1 {
width: 400px;
border-bottom-color: #ffffff;
border-bottom-style: solid;
border-bottom-width: 3px;
border-right-style: solid;
border-right-color: #ffffff;
border-right-width: 3px;
}
#main-home {
height: 221px;
}
#main-home1 {
height: 100px;
}
#main-home2 {
width: 400px; height: 100px;
}
</style>

</head>
<body>
<div id="home-container">
<div id="header"></div>
<div id="left">
<div id="main-home"></div>
<div id="main-home1"></div>
<div id="main-home2"></div>
</div>
<div id="side-home"></div>
</div>
</body>
</html>