div 100% in een andere div
Ik ben dus bezig met een simpel layoutje maar ik heb 2 probleempjes,
1. Als ik een div in een andere div 100% maak, komt die dus uit die andere div..
2. Als ik 2 divs heb in 1 (die naast elkaar moeten staan) werkt dit wel als ik bv. eerste div: 20% en 2de div: 79%, maar als ik die 2de div 80% maak (wat samen 100% is) komt hij eronder te staan..
hier is mijn code:
index.html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<title>Template</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="wrapper">
<div class="menu">
Link1<br>Link2
</div>
<div class="content">
Content
</div>
</div>
</div>
</body>
</html>
<head>
<title>Template</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="wrapper">
<div class="menu">
Link1<br>Link2
</div>
<div class="content">
Content
</div>
</div>
</div>
</body>
</html>
CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
body
{
background: url("../images/bg.gif");
}
div.container {
height: 100%;
width: 800px;
margin-left: auto;
margin-right: auto;
background: #505050;
opacity: 0.5;
border: 1px white solid;
color: white;
text-align: center;
font-family: courier new, courier;
}
div.header{
width: 800px;
height: 80px;
background: url("../images/header.png");
}
div.menu {
width: 20%;
float: left;
height: 100%;
border: 1px white solid;
}
div.content {
width: 80%;
float: left;
height: 100%;
border: 1px white solid;
}
div.footer {
}
{
background: url("../images/bg.gif");
}
div.container {
height: 100%;
width: 800px;
margin-left: auto;
margin-right: auto;
background: #505050;
opacity: 0.5;
border: 1px white solid;
color: white;
text-align: center;
font-family: courier new, courier;
}
div.header{
width: 800px;
height: 80px;
background: url("../images/header.png");
}
div.menu {
width: 20%;
float: left;
height: 100%;
border: 1px white solid;
}
div.content {
width: 80%;
float: left;
height: 100%;
border: 1px white solid;
}
div.footer {
}
Vandaar dat 80% + 20% + 4*1px (2 div, twee kanten) > 100%