Hoogte van DIV in DIV
Zit met een dilemma en dat is als volgt;
http://imageshack.us/photo/my-images/508/nikeheeftnieuwejobs.png/
De "Sollicitatie button" het grijze vlak met daarin een IMG rekt niet mee uit met de hoogte van het kader (gele border)...
Mijn HTML is alsvolgt:
Quote:
<div class="sollicitatiecontainer">
<div class="inhoudcontainer">
<h3><a href="functie.php?id='.$row['id'].'&company_id='.$row['company_id'].'">'.$nieuwe_titel.'</a></h3>
<div>'.$omschrijving.'</div> <a href="functie.php?id='.$row['id'].'&company_id='.$row['company_id'].'"><br /><br />Meer informatie</a><br /><br />
</div>
<div id="equalize" class="solliciterenknop"><a href="solliciteer.php?id='.$row['id'].'&company_id='.$row['company_id'].'" title="Solliciteren op deze vacature"><img alt="solliciteer" src="images/template/solliciteer.png" /></a></div>
<div class="sollicitereninformatie">
<br /><br /><h3>Plaatsingdatum</h3>
'.$row['pdatum'].'
<h3>Contract</h3>
'.$row['contract'].' '.$row['contract2'].'
<h3>Regio</h3>
'.$row['regio'].'
</div>
</div>
<div class="inhoudcontainer">
<h3><a href="functie.php?id='.$row['id'].'&company_id='.$row['company_id'].'">'.$nieuwe_titel.'</a></h3>
<div>'.$omschrijving.'</div> <a href="functie.php?id='.$row['id'].'&company_id='.$row['company_id'].'"><br /><br />Meer informatie</a><br /><br />
</div>
<div id="equalize" class="solliciterenknop"><a href="solliciteer.php?id='.$row['id'].'&company_id='.$row['company_id'].'" title="Solliciteren op deze vacature"><img alt="solliciteer" src="images/template/solliciteer.png" /></a></div>
<div class="sollicitereninformatie">
<br /><br /><h3>Plaatsingdatum</h3>
'.$row['pdatum'].'
<h3>Contract</h3>
'.$row['contract'].' '.$row['contract2'].'
<h3>Regio</h3>
'.$row['regio'].'
</div>
</div>
En de CSS:
Quote:
.sollicitatiecontainer{
width:752px;
max-height:inherit;
text-align: left;
margin:15px 30px 20px 30px;
-moz-border-radius-: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
float:left;
}
.inhoudcontainer{
width:470px;
padding:0 20px 0 10px;
float:left;
text-align: left;
}
.solliciterenknop{
width:44px;
float:left;
padding:8px 0 0 6px;
}
width:752px;
max-height:inherit;
text-align: left;
margin:15px 30px 20px 30px;
-moz-border-radius-: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
float:left;
}
.inhoudcontainer{
width:470px;
padding:0 20px 0 10px;
float:left;
text-align: left;
}
.solliciterenknop{
width:44px;
float:left;
padding:8px 0 0 6px;
}
Het is dus de bedoeling dat het zwarte mee-uitrekt zoals screenhieronder:
http://imageshack.us/photo/my-images/585/nikeheeftnieuwejobs.png/
Ik hoop op jullie hulp, alvast bedankt!
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.sollicitatiecontainer
{
position: relative;
}
.solliciterenknop
{
position: absolute;
top: 0;
bottom: 0;
}
{
position: relative;
}
.solliciterenknop
{
position: absolute;
top: 0;
bottom: 0;
}
Als het goed is rekt hij nu mee.
Voorbeeld
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
.wrapper {
width: 900px;
margin: 0 auto;
text-align: left;
}
.content {
width: 900px;
float: left;
}
.clear { clear: both; }
.footer {
width: 900px;
height: 75px;
float: left;
}
<div class="wrapper">
<div class="content">
<div class="clear"></div>
</div>
<div class="footer clear">
blalbalbal
</div>
</div>
width: 900px;
margin: 0 auto;
text-align: left;
}
.content {
width: 900px;
float: left;
}
.clear { clear: both; }
.footer {
width: 900px;
height: 75px;
float: left;
}
<div class="wrapper">
<div class="content">
<div class="clear"></div>
</div>
<div class="footer clear">
blalbalbal
</div>
</div>