2 binnenste divs en dan buitenste mee laten rekken
Misschien is het heel makkelijk maar ik heb 1 div en daarbinnen is 1 bovenste div met een welkomsttekst.
En daaronder komt een div met gewone tekst. en die onderste is uitrekbaar.
Hoe krijg ik het dan voor elkaar om de bovenliggende div mee te laten rekken?
Zodat die altijd iets groter blijft dan de andere 2 bij elkaar.
Een link naar een oplossing isook goed maar ik kon het niet vinden.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="Tekstvlak">
<div id="Tekstvlak-Welkom">
welkom
</div>
<div id="Tekstvlak-Tekst">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
que,
</div>
</div>
<div id="Tekstvlak-Welkom">
welkom
</div>
<div id="Tekstvlak-Tekst">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
que,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante magna, adipiscing at feugiat vel, ultricies sed tellus. Etiam pellentes-
que,
</div>
</div>
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
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
#Tekstvlak {
position: absolute;
border: 1px solid #d7d7d7;
width: 930px;
height: auto;
left: 28px;
top: 370px;
}
#Tekstvlak-Welkom {
position: absolute;
width: 890px;
height: 52px;
left: 20px;
padding-top: 15px;
border-bottom: 1px solid #d7d7d7;
font-family: "helvetica";
font-size: 35px;
letter-spacing: 2px;
}
#Tekstvlak-Tekst {
position: absolute;
width: 890px;
left: 20px;
top: 80px;
font-family: "verdana";
font-size: 12px;
}
position: absolute;
border: 1px solid #d7d7d7;
width: 930px;
height: auto;
left: 28px;
top: 370px;
}
#Tekstvlak-Welkom {
position: absolute;
width: 890px;
height: 52px;
left: 20px;
padding-top: 15px;
border-bottom: 1px solid #d7d7d7;
font-family: "helvetica";
font-size: 35px;
letter-spacing: 2px;
}
#Tekstvlak-Tekst {
position: absolute;
width: 890px;
left: 20px;
top: 80px;
font-family: "verdana";
font-size: 12px;
}
Ook als de onderste div veel groter word.
heb deze opzet van html code
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<div id="Content">
<div id="Content-Prijsvraag">
</div>
<div id="Content-Tweet">
</div>
</div>
<div id="Content-Prijsvraag">
</div>
<div id="Content-Tweet">
</div>
</div>
en deze 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
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
#Content {
position: relative;
background-image: url(../images/Content_Boven.png);
background-repeat: repeat-x;
top: 66px;
width: 100%;
min-height: 200px;
clear: both;
}
#Content-Prijsvraag {
position: relative;
width: 640px;
height: 63px;
top: 10px;
left: 50%;
margin-left: -320px;
}
#Content-Tweet {
position: relative;
width: 600px;
min-height: 21px;
left: 50%;
top: 80px;
margin-left: -300px;
}
position: relative;
background-image: url(../images/Content_Boven.png);
background-repeat: repeat-x;
top: 66px;
width: 100%;
min-height: 200px;
clear: both;
}
#Content-Prijsvraag {
position: relative;
width: 640px;
height: 63px;
top: 10px;
left: 50%;
margin-left: -320px;
}
#Content-Tweet {
position: relative;
width: 600px;
min-height: 21px;
left: 50%;
top: 80px;
margin-left: -300px;
}
de div #Content moet uitrekbaar zijn want daaronder zit de footer en die moet automatisch verder naar beneden schuiven als content groter word.
de div #Content-prijsvraag heeft een vaste hoogte maar #Content-Tweet moet uitrekbaar zijn.
En naarmate die uitrekt moet de div #Content meerekken.
Hoe krijg ik dit voor elkaar?
Verder moet je dan kijken naar faux columns. En geen vaste hoogtes meegeven, maar werken met min-height.
