HTML & CSSur HTML, XHTML & CSS
7 svar · 450 visningar · startad av Jessica_s76
<!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" xml:lang="sv" lang="sv">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
text-align: center;
}
#container {
width: 60%;
margin: auto;
text-align: center;
border: 1px solid #000;
}
.column {
float: left;
text-align: left;
width: 20%;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<div class="column">Test text</div>
<div class="column">Test text</div>
<div class="column">Test text</div>
</div>
</body>
</html>
Varför fyller inte divarna med classen column ut hela vägen?
Jag vill alltså ha 3 columer med "fluid" width fast centrerade i mitten.
Du har ju satt bredden till 20%. blir ju 20% av 60%. inte 20% av hela fönstret.
Öka 20% till 30-33%. blev dock inte bra med 33% då hoppade en av dem ner på nästa rad. du får leka lite mer med det så löser det sig säkert.
Anledning till att det inte går att sätta den till 33% beror säkert på att du har en border som är ökar på storleken på boxen. Den lägger sig utanför bredden man satt på boxen.
Ja men jag vill ju inte ha hela fönstret jag vill ha 60% därför har jag satt det till 60% :)
Btw anledningen till att du inte lyckades med 33% beror på att margin och padding inte är satt till 0 på bodyn.
Menar du att de tre kolumnerna skall ligga centrerade i mitten av din container?
<!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" xml:lang="sv" lang="sv">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
{
text-align: center;
}
#container {
width: 60%;
margin: auto;
text-align: center;
border: 1px solid #000;
}
#content {
margin: auto;
width: 86%;
}
.column {
float: left;
text-align: left;
width: 32%;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="column">Huvudrubrik
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque mauris. Aenean consequat. Mauris vehicula purus nec neque. Praesent suscipit auctor metus. Fusce sollicitudin est. Vestibulum ut purus. Cras lectus neque, dignissim in, lacinia at, dapibus eget, massa. Praesent non magna non sapien cursus suscipit. Aliquam quis lectus. Sed quam. Vivamus est est, consequat sed, blandit sed, vehicula</div>
<div class="column">Huvudrubrik
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque mauris. Aenean consequat. Mauris vehicula purus nec neque. Praesent suscipit auctor metus. Fusce sollicitudin est. Vestibulum ut purus. Cras lectus neque, dignissim in, lacinia at, dapibus eget, massa. Praesent non magna non sapien cursus suscipit. Aliquam quis lectus. Sed quam. Vivamus est est, consequat sed, blandit sed, vehicula</div>
<div class="column">Huvudrubrik
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque mauris. Aenean consequat. Mauris vehicula purus nec neque. Praesent suscipit auctor metus. Fusce sollicitudin est. Vestibulum ut purus. Cras lectus neque, dignissim in, lacinia at, dapibus eget, massa. Praesent non magna non sapien cursus suscipit. Aliquam quis lectus. Sed quam. Vivamus est est, consequat sed, blandit sed, vehicula</div>
</div>
</div>
</body>
</html>
Det är inga problem att du har satt den till 60%.
men din div-taggar har du satt till 20%, det blir 20% av föräldern som i detta fallet är en div med width 60%. så din innersta div-taggar blir 20% vardera av "container". därför blir det ca 40% tomt på högersida. hoppas du förstår hur jag menar.
Jag vill alltså att cntainer ska vara 60% av fönstret och att dviarna i den ska fylla ut hela containern.
Jag behöver inte ha container egentligen tänkte bara att man var tvungen att ha den för att centrera divarna på sidan.
Vill alltså ha 3st divar som är centrerade på sidan och som tillsammans är 60% av sidan dvs 20% var.
The HULK, ja nu förstod jag vad du menade!!! Förlåt jag är lite bortkommen :)
Verkar fungera fint, tack till er båda.
Fast aj, när jag förmminskar fönstret lite så hoppar en kolumn ner, men när jag har fönstret i fullskärm så fungerar det. Borde inte kolumerna förminskas?