Sidan Cssdesign har lagt upp ett jättebra tips för två kolumner centrerat i css.
Men saken är den att jag skulle vilja ha samma modell fast med tre kolumner.
Är en total nybörjare vad gäller css men har kollat runt på nätet efter bra information men när jag försöker lägga till en till kolumn så hamnar alla tre efter varandra.
Förstår att det borde ha med antingen clear eller left/right att göra men får inte riktigt till det.
Någon som kan fylla i den id som fattas?
* { /* nollställer alla marginaler och padding */
margin:0;
padding:0;
}
body {
text-align: center; /* Centrera MSIE (steg 1/3)*/
font-size: normal;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #000;
background: #666;
}
#wrap {
margin:10px auto; /* Centrera #wrap (2/3) */
background: #fff url(faux.gif) repeat-y 0 0;
width: 750px;
text-align: left; /* Vänsterställer innehåll (3/3) */
}
#header {
height:100px;
background:#999;
color:#fff;
}
#left {
width: 500px;
float: left;
display: inline;
}
#right {
width: 250px;
float: right;
display: inline;
}
#footer {
margin-top:10px;
}
InsiderMedlem sedan jan. 2000978 inlägg Box
Skillnaden mellan exemplet jag gav och det som ges under länken är ju att man anger en box eller wrap med fast bredd som de tre kolumnerna ska ligga inom.
Exemplet verkar ange enbart tre kolumner.
Har jag fel?
InsiderMedlem sedan jan. 2000978 inlägg Du har rätt. Här är ett exempel med en yttre container.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
<style type="text/css">
* {margin:0;padding:0;}
#container {
margin:0 auto;
width: 750px;
text-align: left;
background:#fff;
}
#header {
width: 750px;
height: 40px;
background:#1ca;
}
#left {
width: 200px;
float: left;
background:#120;
}
#main {
width: 400px;
float: left;
background:#fff;
}
#right {
width: 150px;
float: left;
background:#dda;
}
#footer {
clear:both;
width: 750px;
height: 40px;
background:#22a;
}
</style>
</head
<body>
<div id="container">
<div id="header">
här är headerelement
</div>
<div id="left">
<ul>
<li>asdas</li>
<li>asdasd</li>
<li>asdasd</li>
<li>asdads</li>
</ul>
</div>
<div id="main">
<h2>blabla</h2>
<p>Innehåll</p>
</div>
<div id="right">
höger
<ul>
<li>asdas</li>
<li>asdasd</li>
<li>asdasd</li>
<li>asdads</li>
</ul>
</div>
<div id="footer">
sidfot
</div>
</div>
</body>
</html>
Som du märker kan man inte påverka höjden på flytande element så bra.
För att ge känslan av tre kolumner måste du trixa med en bakgrundsbild i din #container.
Ex: http://www.alistapart.com/articles/fauxcolumns/
Tack!
Tack för hjälpen.
Det var precis vad jag var ute efter och nu upptäckte jag varför jag inte fick ordning på den.
Jätteschysst.
