2 kolumner som inte vill ligga still ..

5 svar · 487 visningar · startad av rakatoner 2 mars 2009

rakatonerMedlem sedan okt. 2007264 inlägg

Frågan2 mars 2009 10:40#1

Jag har nu kodat en väldans enkel css .. o min tanke vara att skapa divar - boxar som jag sen skulle kunna fylla med bilder text tabeller..

men närjag skriver i min mitten box #contents som ska vara textdelen så flyttar diven som är en sid o kolumn ner... #contents2

vilket sabbar hela iden.. dom ska ju ligga paralllet...

Någon som vet varför eller tänker jag helt fel ?

/sara

style.css

body
	{
		margin: 0;
		padding: 0;
		font: 85% arial, hevetica, sans-serif;
		text-align: center;
		color: #505367;
		
		background-image: url(bilder/bakgrund3.gif);
	}
	
	#container
	{
	
		margin:10px 150px 50px 150px;
		width: 700px;
		height: 900px;
		text-align: left;
		background-color: #F5DEB3;
		border: 15px solid 	#8B4513;
	}
	
	
	
	
	#header
	{
		height: 75px;
		background-color: #8B4513;
	}
	
	#mainnav
	{
		height: 45px;
		background-color: green;
	}
	
	
	
	
	
	#contents	
	{
	float: left; 
	margin: 10px 20px 20px 20px; 
		
		height: 450px;
		width: 440px;
		background-color: aqua;
	}
	

	#contents2	
	{
	float: left; 
	
		
		margin-left: 440px;
		height: 450px;
		width: 225px;
		background-color: red;
	}
	
	#footer	
	{
	
	margin: 10px 10px 10px 10px;
		clear: both;
		height: 20px;
		background-color: lime;
		width: 680px;
	}
	
	}

html koden

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Blommor</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div id="container">

	<div id="header">fffffffffffffff<br>ffffffffffffffffffffffffffffffffffff<br>
	fffffffffffffff<br>ffffffffffffffffffffffffffffffffffff<br>fffffffffffffffffffffffffffffffffffffffffffffffffffffffff<br>fffffffffffffffffffff</div> 
	<div id="mainnav">ffffffffffffffffff<br>fffffffffffffffff</div> 
	
	<div id="contents">dsdsdd
	<div id="contents2"><table border="1" width="225" id="table1">
	<tr>
		<td><img src="svart.jpg"></td>
	</tr>
	<tr>
		<td><img src="svart.jpg"></td>
	</tr>
</table>
dsdsdd

	</div> </div> 
	<table border="5" width="650" id="table1">
	
	<tr>
		<td width="215"><img src="svart.jpg"></td>
		<td  width="215"><img src="svart.jpg"></td>
		<td width="215"><img src="svart.jpg"></td>
	</tr>
</table>

	
	
	<div id="footer">fffffffffffff</div>
</div>
</body>
</html>

voigtann1Medlem sedan juni 20019 519 inlägg

2 mars 2009 10:58#2

jag hade flotat din navbar och satt en width på den, och på din contents så sätter du bara margin-left samma som din width på din navbar (+ padding och margin om du vill få lite luft).

tantenMedlem sedan nov. 20051 596 inlägg

2 mars 2009 11:15#3

<div id="contents">dsdsdd</div>
<div id="contents2">med tabellen</div>

Men då får man räkna om... så på ett ung.

#contents
{
float: left;
margin: 10px 20px 20px 20px;
height: 450px;
width: 410px;
background-color: aqua;
}
#contents2
{
margin-top: 10px;
float: left;
height: 450px;
width:225px;
background-color: red;
}

rakatonerMedlem sedan okt. 2007264 inlägg

2 mars 2009 17:18#4

Tack Tanten !! nu funkar det o dom ligger snällt still men varför kan man ju undra - tror om jag räknar rätt att jag glömt räkna in margin i total summan för kolumnerna !

voigtann1 - gjort det oxå men det var en senare sak...där ska ligga en topp bild o det ska in lite navigeringsknapper...

tack ! /sara

tantenMedlem sedan nov. 20051 596 inlägg

2 mars 2009 17:38#5

Du hade contents2 inne i den andra med margin-left, när du då börjar skriva i den som ligger runt bägge så kommer den inre att flyttas neråt. Enklast är då att ha dem bredvid varandra om man vill göra det du ville.

voigtann1Medlem sedan juni 20019 519 inlägg

2 mars 2009 18:24#6

spelar ingen roll med header eller footer, så länge dom inte floatar (vilket din css inte har) så det är inga problem.