div 100% in een andere div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Stefan iemand

Stefan iemand

12/09/2011 13:07:33
Quote Anchor link
Hallo,
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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 {
}
 
PHP hulp

PHP hulp

16/04/2021 05:22:16
 
Tobias Tobias

Tobias Tobias

12/09/2011 13:44:26
Quote Anchor link
Denk eraan dat de border ook plek in neemt, die bovenop de width komt.
Vandaar dat 80% + 20% + 4*1px (2 div, twee kanten) > 100%
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.