Tre kolumner

4 svar · 421 visningar · startad av stateless 9 aug. 2005

statelessMedlem sedan feb. 200423 inlägg

Frågan9 aug. 2005 11:59#1

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

9 aug. 2005 12:17#2

Kolla in det här exemplet:
http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html

statelessMedlem sedan feb. 200423 inlägg

9 aug. 2005 16:14#3

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

9 aug. 2005 17:41#4

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/

statelessMedlem sedan feb. 200423 inlägg

9 aug. 2005 21:30#5

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.