Forum Mjukvara Programmering och digitalt skapande Tråd

HTML/CSS: Hjälp med 3 kolumner, den tredje hamnar fel!

1
Skriv svar
Permalänk
Medlem
●

HTML/CSS: Hjälp med 3 kolumner, den tredje hamnar fel!

Jag har ett grymt irriterande problem som jag inte lyckas lösa.

Jag har tre kolumner som ska ligga bredvid varann, kolumn nummer ett och två ligger precis där jag vill, men den tredje ("right") vill av någon anledning ligga på raden under, och det vill ju inte jag.

Om det finns någon vänlig själ som har lite mer kunskap än jag har som kan hjälpa mig så skulle jag verkligen uppskatta det!

Så här ser det ut:

HTML:

<!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=UTF-8" />
<title>Titel.</title>

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

<body>

<div id="container">
<?php require($DOCUMENT_ROOT . "header.html");
 ?><br /></div>
 

 
 <div id="content">
 <img src="bilder/pro.jpg" width="900px" height="450px" alt="bild stor" /><br /><br />
 
  <div id="left">
     <img src="bilder/1.jpg" width="290px" height="150px" alt="bild1" />
     <h3>Hej</h3>
     "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
     
     
     </div>

  <div id="mitt">
     <img src="bilder/2.jpg" width="290px" height="150px" alt="bild2" />
     <h3>Hå</h3>
     "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
     
     
    </div>
    
     <div id="right">
     <img src="bilder/3.jpg" width="290px" height="150px" alt="bild3" />
     <h3>Hå</h3>
     "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
     
     
    </div>


</div>


</div>
 
<div id="footer">
<?php require($DOCUMENT_ROOT . "footer.html");
 ?><br /></div>

</body>
</html>

CSS:

@charset "UTF-8";
/* CSS Document */

html, body {    
    margin: 0px;
    padding: 0px;
    font-family: Calibri;
    font-size: 14px;
    color: #333333;
}
  
html {
    background-color: #CCCCCC;
}

/*Delar*/  
#container {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
	background:#FFF;
	padding: 10px;
}

#footer {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
	padding: 10px;
	background:#ffffff;
	color:#CCC;
}

#content {
    width: 900px;
	height: auto;
    margin-left: auto;
    margin-right: 0px;
    margin-top: 10px;
	margin-bottom: 30px;
	}
  
#header {
    width: 900px;
    height: 84px;
	margin-left: 0;
    margin-right: auto;
    background-color: #ffffff;
    border: 0px ;
}

/*H*/

h1 {
    font-family: Calibri;
    font-weight: normal;
    font-style: italic;
    font-size: 35px;
    color: #d2da00;
    margin-top: 5px;
	margin-bottom: 0px;
    padding: 0px;
}

h2 {
    font-family: Calibri;
    font-weight: normal;
    font-style: italic;
    font-size: 20px;
    color: #ffffff;
    margin-top: 0px;
    padding: 0px;
	text-shadow: #333333 4px 4px 4px;
}

h3 {
    font-family: Calibri;
    font-weight: normal;
    font-style: italic;
    font-size: 20px;
    color: #333333;
    margin-top: 0px;
	margin-bottom: 0px;
    padding: 0px;
}
  
#header h2 {
    font-family: Calibri;
    font-weight: normal;
    font-style: italic;
    font-size: 25px;
    color: #becbd9;
    margin: 0px;
    padding: 0px;
}
  
#menu {
    height: 84px;
    width: 900px;
    padding: 0px;
    font-size: small;
	font: calibri;
	color:#ffffff;
	font-weight: bold;
}
  
/*Länkar*/

 a:visited {
		font-weight:bold;
		color: #333333;
	}
	
	a:hover {
		color: #333333;
		font-weight:bold;
		text-decoration:underline;	
	}
	
	a:active {
		color: #333333;
		font-weight:bold;
	}
	
	a:link {
		color: #333333;
		font-weight:bold;
	}
	
	a {
		text-decoration:none;
		font-weight:bold;
		color:333333;
	}
	
/*Kolumner jao*/

#left, #mitt, #right {
  width: 290px; 
  margin:0px; 
  padding:0px;
  
}

#left {   float:left; 
}

#mitt {   
  margin-left: 305px;
  margin-right: 305px;

  
}
#right {
	float: right;
}
Visa signatur

http://fotografdavidlundgren.se

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Använd float: left; på alla tre så ska du se att det löser sig.
Se även till att parenten är tillräckligt bred.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du ser ut att ha avslutat din container för tidigt också, den borde innesluta hela innehållet... Sen som sagt, float left på alla, och om du inte måste ha exakt bredd kan du lika gärna sätta % på bredden eftersom du ändå har fast bredd på din container.

<div id="container">
<?php require($DOCUMENT_ROOT . "header.html");
 ?><br /></div>

Sen finns ingen anledning att sätta några marginaler på #mitt, stryk dem

#mitt {   
  margin-left: 305px;
  margin-right: 305px;
Visa signatur

Stabilitet är överskattat... En krasch om dan gör kroppen glad!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Typ såhär?
http://jsfiddle.net/9Vtda/

Om du nu måste ha dem separerade på det sättet. Annars kan du ju helt enkelt sätta padding-left & right på .column så hamnar inte texten precis bredvid den kolumn som ligger till vänster.

Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag löste det så här:

http://jsfiddle.net/uuDSv/1/

CSS:

#left, #mitt, #right {
  width: 290px; 
  margin:0px; 
  padding:0px;
  float: left;
  
  }
  #left, #mitt {
	  margin-right:15px;
  
}

Citat:

Du ser ut att ha avslutat din container för tidigt också, den borde innesluta hela innehållet... Sen som sagt, float left på alla, och om du inte måste ha exakt bredd kan du lika gärna sätta % på bredden eftersom du ändå har fast bredd på din container.

Avslutar jag inte den där så blir hela sidan fel, varför vet jag inte, men då verkar allt bli huller om buller.

Hursomhelst verkar mitt problem nu vara löst!

STORT tack för att ni tog er tid.

Visa signatur

http://fotografdavidlundgren.se

Redigera
Citera flera Citera
Permalänk
Medlem
●

Angående din container, det är ju den som styr så du får samma bakgrundsfärg mm även om kolumnerna växer i olika takt, och tanken är som sagt att man har den runt hela innehållet.

ex: Här är din kod som den är nu: http://www.riskaka.com/test/kolumner1.html

Om du lägger till overflow: hidden; i #container och tar bort </div> efter din header så ser det ut såhär, vilket jag antar att det är det du är ute efter (<div id="container"> avslutas ändå längre ner i koden:

ex: http://www.riskaka.com/test/kolumner.html

Visa signatur

Stabilitet är överskattat... En krasch om dan gör kroppen glad!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av RaWeN:

Angående din container, det är ju den som styr så du får samma bakgrundsfärg mm även om kolumnerna växer i olika takt, och tanken är som sagt att man har den runt hela innehållet.

ex: Här är din kod som den är nu: http://www.riskaka.com/test/kolumner1.html

Om du lägger till overflow: hidden; i #container och tar bort </div> efter din header så ser det ut såhär, vilket jag antar att det är det du är ute efter (<div id="container"> avslutas ändå längre ner i koden:

ex: http://www.riskaka.com/test/kolumner.html

Gå till inlägget

Du har helt rätt. Tack!

Visa signatur

http://fotografdavidlundgren.se

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara