Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Lapin Maakuntakorkeakoulu</title>
<link href="tyyli.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="keski">
<div id="kehys">
<div id="logo"></div>
<div id="valikko">
<a href="index.html">Etusivu</a> ¦ <a href="esittely.html">Esittely</a> ¦ <ahref="koulutus.html">Koulutus</a> ¦ <a
href="seutukunnat.html">Seutukuntaesittelyt</a> ¦ <a href="ohje.html">Ohje</a></div>
<div class="vasennus">
<div id="v-palkki">Avoimen opetuksen koulutushaku:
asfasf<br>
asfasf<br>
asfasf<br>
asfasf<br>
asfasf<br>
asfasf<br>
asfasf<br>
asfasf<br>
asfasf<br>
asfasf<br>
</div>
<divid="main">keskustaasfasf<br>asfasf<br>asfasf<br>asfasf<br>asfasf<br>asfasf<br>asfasf
<br></div>
<div id="o-palkki">oikeapalkkiasfasf<br>asfasf<br>asfasf<br>asfasf<br>asfasf<br></div>
</div>
</div>
</body>
</html>
body {
background-color: #4D7499;
background-image: url(pohja.jpg);
font-family: arial, verdana;
font-size: 12px;
color: #0A2236;
margin: 8px;}.keski {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;}.vasennus {
margin-left: 0px;
text-align: left; }#kehys {
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto; }#logo {
width: 800px;
height: 110px;
background-image: url(logo.jpg);
border: solid 3px white; }#valikko {
position: relative;
top: -3px;
color: white;
font-weight: bold;
width: 800px;
background-color: #456D92;
border: solid 3px white; }#v-palkki {
position: relative;
top: 8px;
background-color: #CDD6DE;
width: 140px;
height: auto;
border: solid 3px white; }#main {
position: relative;
margin-top: -100px;
left: 150px;
background-color: #E3E9EE;
width: 500px;
height: auto;
border: solid 3px white; }#o-palkki {
position: relative;
left: 660px;
width: 140px;
background-color: #CDD6DE;
height: auto;
border: solid 3px white; }A:LINK {
color: white;
font-family: arial, verdana;
font-size: 12px;
text-decoration: none;
font-weight: bold; }A:VISITED {
color: white;
font-family: arial, verdana;
font-size: 12px;
text-decoration: none;
font-weight: bold; }A:HOVER {
color: #CDD6DE;
font-family: arial, verdana;
font-size: 12px;
text-decoration: none;
font-weight: bold; }
I want the website to have three columns below the logo/navigation bar, but I also want it to be centered. If I use absolute positioning, the site does not center. If I use relative positioning, it's otherwise exactly how I want it, but when I add text to any column, the next column beside it is pulled downwards, making a "stairstep" which is not what I want.
With Float: Left, it's otherwise nice, but I want there to be a small (8 pixel) gap between the three columns and so that it shows the background image.
Thanks for help. (Random text there for testing :P)
I'm about to post a version of your code that accomplishes what you describe. I renamed some of your <div>s to their English equivalents based upon the purpose I saw them serving in the layout. Please know that I only did this for my benefit, so that I could analyse and manipulate the code easier.
The code below will give you three columns about 10px below the navigation with 8px space between them. Here's a breif description of some of the changes I made to the code, but you'll need to pore over it yourself to note everything I've done.
One, I replaced your <br> seperated test text with some "lorem ipsum" stuff in regular <p> tags. I also moved your CSS into the <head> for testing purposes. If it were my design, I would move it back into an external stylesheet once I had things how I wanted. I did a bit of trimming in the CSS, removing some extra margin settings and whatnot that were no longer necessary.
Here's the real "meat" of the changes I made:
That said, here's the code. Cut and paste it into an .htm file and see what you think...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Lapin Maakuntakorkeakoulu</title>
<style type="text/css">
body {
background-color: #4D7499;
background-image: url(pohja.jpg);
font-family: arial, verdana;
font-size: 12px;
color: #0A2236;
}#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
}#head {
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto; }#logo {
width: 794px;
height: 110px;
background-image: url(logo.jpg);
border: solid 3px white; }#nav {
color: white;
font-weight: bold;
width: 794px;
background-color: #456D92;
border: solid 3px white;
}#container {
float:left;
width: 800px;
margin-top: 10px;
text-align: left;
}#left {
float:left;
width: 144px;
margin-right: 0px;
height: auto;
border: solid 3px white;
background-color: #CDD6DE;
}#main {
float:left;
width: 478px;
margin: 0 8px 0 8px;
height: auto;
border: solid 3px white;
background-color: #E3E9EE;
}#right {
float:left;
width: 144px;
margin-left: 0px;
height: auto;
border: solid 3px white;
background-color: #CDD6DE;
}A:LINK {
color: white;
font-family: arial, verdana;
font-size: 12px;
text-decoration: none;
font-weight: bold; }A:VISITED {
color: white;
font-family: arial, verdana;
font-size: 12px;
text-decoration: none;
font-weight: bold; }A:HOVER {
color: #CDD6DE;
font-family: arial, verdana;
font-size: 12px;
text-decoration: none;
font-weight: bold; }
</style>
</head>
<body>
<div id="wrapper">
<div id="head">
<div id="logo">
</div>
<div id="nav">
<a href="index.html">Etusivu</a> ¦ <a href="esittely.html">Esittely</a> ¦ <a href="koulutus.html">Koulutus</a> ¦ <a href="seutukunnat.html">Seutukuntaesittelyt</a> ¦ <a href="ohje.html">Ohje</a>
</div>
<div id="container">
<div id="left">Avoimen opetuksen koulutushaku:
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</body>
</html>
cEM
