2 svar · 352 visningar · startad av Danielkun
Tänkte att jag ska gå över till CSS och köra helt utan tables men det är en sak jag inte förstår. På koden nedan har jag:
1 st stor div på 600px.
2 st små divar på 300px var under diven ovan.
Nu vill jag ha de 2 undre divarna lika breda som den ovan (600px). Jag vill även ha en 2px border på rutorna och en padding på 8px.
Borde inte mina 2 st divar undertill bli 280px i storlek st för:
2 + 8 + innehållet + 8 + 2 = 20px
Borden kommer ju på båda sidor så den måste ju räknas 2 ggr??
men den blir för liten. skriver jag däremot 290px så stämmer det. varför???
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Your own page title</title>
<style>
<!--
div {
border: 2px solid Black;
padding: 8px;
width: 600px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
#navigation {
float: left;
width: 290px;
}
#content {
float: left;
width: 290px;
}
-->
</style>
</head>
<body>
<div id="header">
<h1>The name of this page</h1>
</div>
<div id="navigation">
<h2>Navigation</h2>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div id="content">
<h2>Content</h2>
<p>Some sample content</p>
</div>
</body>
</html>
Nu fattar jag tror jag..
Själva diven är 600px men sen läggs det till 10px på varsin sida.
Så när jag lägger till 2 divar undertill så måste jag bara beräkna bordern och paddingen i mitten på dom. vilken blir 20 tillsammans och inte 40 för sidorna kommer ju inte med.
CSS följer en speciell box model som man bör lära sig utantill.
http://www.google.se/search?hl=sv&q=CSS+Box+model&meta=
