/    Sign up×
Community /Pin to ProfileBookmark

piggybacking properties.

Copy linkTweet thisAlerts:
Jul 01.2005

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.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrtwice99Jul 01.2005 — 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:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

or

http://www.google.com/search?q=three+column+css+layout

This one looked good to me:

http://www.tjkdesign.com/articles/c...ols/default.asp

I hope that helps.
Copy linkTweet thisAlerts:
@FrozenDiceauthorJul 01.2005 — 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.
[code=html]<!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="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">
[B]<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>[/B]
</div>

</div>
</body>
</html>
[/code]

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;

<i> </i>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?
Copy linkTweet thisAlerts:
@mrtwice99Jul 01.2005 — 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):

[CODE].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;
}
[/CODE]
×

Success!

Help @FrozenDice spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...