I'm trying to create a website where there are three div layers each to the left of the one infront of it. The site must work for all resolutions, thus its centered, and the three divs are set in html to align, left, center and right. This works but unfortunatly they stack like regular html.
What I mean is it looks like this.
left
center
right
So I tried using css relative property and I can get the others to align horizontaly if I type in - whatever the height of the previous ones before it. Can I do this by just saying take this property and add this to it? If I can't then I have to manualy mess arround with it each time.If I understand you correctly, you have three divs that currently are like this:
left
center
right
and you want them to look like this
left center right
You basically want a three column layout. If that is what you are looking for, a good place to start is to use a template others have created. Try this:
<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ThreeColumnLayouts">http://css-discuss.incutio.com/?page=ThreeColumnLayouts</a><!-- m -->
or
<!-- m --><a class="postlink" href="http://www.google.com/search?q=three+column+css+layout">http://www.google.com/search?q=three+column+css+layout</a><!-- m -->
This one looked good to me:
<!-- m --><a class="postlink" href="http://www.tjkdesign.com/articles/c...ols/default.asp">http://www.tjkdesign.com/articles/c...ols/default.asp</a><!-- m -->
I hope that helps.My problem is more complicated. I have a main container div that is aligned centered. Then inside that I have a hdeader div which is left aligned and holds a horizontal text menu and banner. Still in container I have another named main which is left centered, inside main is where I want the three windows to be. They have to all be relative so they look good when the page is shrunk and on different resolution screens. The probem ... oh F*** this, I'll jsut post the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Template</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container" align="center" class="container">
<div id="header" align="center" class="header">
| Home | Custom | Logos | HTML Templates | Flash Templates | Serach |
</div>
<div id="main" align="left" class="main">
<div id="left" class="leftPrev" align="center">
hi
</div>
<div id="center" class="centerPrev" align="center">
hi
</div>
<div id="right" class="centerPrev" align="center">
hi
</div>
</div>
</div>
</body>
</html>
style.css
.container {
padding: 0px;
margin: 0px;
}
body {
margin: 0px;
padding: 0px;
}
.header {
font-size: 14px;
margin: 0px;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
height: 124px;
background-image: url(images/dusturl4.jpg);
background-repeat: no-repeat;
background-position: center 20px;
}
.main {
font-family: "Times New Roman", Times, serif;
width: 750px;
}
.leftPrev {
position:relative;
width: 142px;
height: 153px;
background-color:#000099;
top: 0px;
margin: 0px;
padding: 0px;
}
.centerPrev {
position:relative;
height: 153px;
top:-153px;
width: 142px;
}
.rightPrev {
position:relative;
top:-306px;
height: 153px;
width: 142px;
}
.whiteText {
color: #FFFFFF;
font-size: 14px;
margin: 0px;
padding: 0px;
}
The problem is where the bold code is, the aligns only align the text inside the div. I need to use the aligns to be able to align the second two divs like I did with the first specifying left. But for them center and right.
Understand?I am still not exactly sure what you are trying to do, but I think you are trying to have three divs line up in columns in the "main" container. One left, one center, one right. Here is the css to do that (note that I removed some of your stuff, start simple and work towards complexity):
.container {
padding: 0px;
margin: 0px;
}
body {
margin: 0px;
padding: 0px;
}
.header {
font-size: 14px;
margin: 0px;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
height: 124px;
background-image: url(images/dusturl4.jpg);
background-repeat: no-repeat;
background-position: center 20px;
}
.main {
font-family: "Times New Roman", Times, serif;
width: 750px;
}
#left {
float: left;
width: 33%;
background: red;
}
#center{
float: left;
width: 33%;
background: green;
}
#right {
float: left;
width: 33%;
background: blue;
}
What I mean is it looks like this.
left
center
right
So I tried using css relative property and I can get the others to align horizontaly if I type in - whatever the height of the previous ones before it. Can I do this by just saying take this property and add this to it? If I can't then I have to manualy mess arround with it each time.If I understand you correctly, you have three divs that currently are like this:
left
center
right
and you want them to look like this
left center right
You basically want a three column layout. If that is what you are looking for, a good place to start is to use a template others have created. Try this:
<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ThreeColumnLayouts">http://css-discuss.incutio.com/?page=ThreeColumnLayouts</a><!-- m -->
or
<!-- m --><a class="postlink" href="http://www.google.com/search?q=three+column+css+layout">http://www.google.com/search?q=three+column+css+layout</a><!-- m -->
This one looked good to me:
<!-- m --><a class="postlink" href="http://www.tjkdesign.com/articles/c...ols/default.asp">http://www.tjkdesign.com/articles/c...ols/default.asp</a><!-- m -->
I hope that helps.My problem is more complicated. I have a main container div that is aligned centered. Then inside that I have a hdeader div which is left aligned and holds a horizontal text menu and banner. Still in container I have another named main which is left centered, inside main is where I want the three windows to be. They have to all be relative so they look good when the page is shrunk and on different resolution screens. The probem ... oh F*** this, I'll jsut post the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Template</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container" align="center" class="container">
<div id="header" align="center" class="header">
| Home | Custom | Logos | HTML Templates | Flash Templates | Serach |
</div>
<div id="main" align="left" class="main">
<div id="left" class="leftPrev" align="center">
hi
</div>
<div id="center" class="centerPrev" align="center">
hi
</div>
<div id="right" class="centerPrev" align="center">
hi
</div>
</div>
</div>
</body>
</html>
style.css
.container {
padding: 0px;
margin: 0px;
}
body {
margin: 0px;
padding: 0px;
}
.header {
font-size: 14px;
margin: 0px;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
height: 124px;
background-image: url(images/dusturl4.jpg);
background-repeat: no-repeat;
background-position: center 20px;
}
.main {
font-family: "Times New Roman", Times, serif;
width: 750px;
}
.leftPrev {
position:relative;
width: 142px;
height: 153px;
background-color:#000099;
top: 0px;
margin: 0px;
padding: 0px;
}
.centerPrev {
position:relative;
height: 153px;
top:-153px;
width: 142px;
}
.rightPrev {
position:relative;
top:-306px;
height: 153px;
width: 142px;
}
.whiteText {
color: #FFFFFF;
font-size: 14px;
margin: 0px;
padding: 0px;
}
The problem is where the bold code is, the aligns only align the text inside the div. I need to use the aligns to be able to align the second two divs like I did with the first specifying left. But for them center and right.
Understand?I am still not exactly sure what you are trying to do, but I think you are trying to have three divs line up in columns in the "main" container. One left, one center, one right. Here is the css to do that (note that I removed some of your stuff, start simple and work towards complexity):
.container {
padding: 0px;
margin: 0px;
}
body {
margin: 0px;
padding: 0px;
}
.header {
font-size: 14px;
margin: 0px;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
height: 124px;
background-image: url(images/dusturl4.jpg);
background-repeat: no-repeat;
background-position: center 20px;
}
.main {
font-family: "Times New Roman", Times, serif;
width: 750px;
}
#left {
float: left;
width: 33%;
background: red;
}
#center{
float: left;
width: 33%;
background: green;
}
#right {
float: left;
width: 33%;
background: blue;
}