Ik zit met het volgende probleem.
ik heb een div, met daarin nog 4 divjes.
eentje voor een header. 1 voor de footer
Nu heb ik er een voor een plaatje
en een voor de tekst.
Hoe zorg ik ervoor dat de tekst om het plaatje komt?
Het lukt nu enigzins, maar nu geeft hij de footer-div niet weer of het plaatje en tekst niet.
zie code en plaatjes:
<div class="p">
<div class="top">
<table width="100%">
<tr>
<td>Naam:</td><td><strong>Naam van post</strong></td>
<td> </td>
<td>Catogorie:</td><td><strong>Catogorie</strong></td>
</tr>
</table>
</div>
<div class="bottom">
<table width="100%">
<tr>
<td>Poster:</td><td><strong>Naam van poster</strong></td>
<td> </td>
<td>Datum:</td><td><strong>19-03-2006 00:00</strong></td>
</tr>
</table></div>
<div class="foto"><img src="images/babes.png" align="middle" width="100px" height="100px" hspace="2px" vspace="2px"></div>
bladiebliediebloediebladievlielfjnad<br>
dauhdkajhd;aksjd;alksjd;lakjsdaljd<br>
asjhdlajkshdalkjhdalkjd<br>
ahdgasjhdgakjhdgajhdgajdghad<br>
ajhdlajdhalksjdhalksjdhalksjhd<br clear="all">
ajshdlkjasdhlkajhdlakjshdalkjshd...</div>
CSS:
.p {
width:400px;
height:200px;
background-color:#666666;
color:#0099CC;
border:#990000 2px solid;
overflow:hidden;
}
.top {
width:400px;
height:20px;
border-bottom:#990000 1px solid;
overflow:hidden;
margin-left:0px;
z-index:10;
}
.bottom {
width:400px;
height:20px;
border-top:#990000 1px solid;
overflow:hidden;
margin-top:160px;
margin-right:2px;
z-index:10;
}
.foto {
width:100px;
height:100px;
margin-top:4px;
margin-left:2px;
border:#990000 1px solid;
overflow:hidden;
vertical-align:middle;
text-align:center;
float:left;
clear:left;
}
p {
height:166px;
}
geeft:
-----------------------------------------------------------------
<div class="p">
<div class="top">
<table width="100%">
<tr>
<td>Naam:</td><td><strong>Naam van post</strong></td>
<td> </td>
<td>Catogorie:</td><td><strong>Catogorie</strong></td>
</tr>
</table>
</div>
<div class="foto"><img src="images/babes.png" align="middle" width="100px" height="100px" hspace="2px" vspace="2px"></div>
bladiebliediebloediebladievlielfjnad<br>
dauhdkajhd;aksjd;alksjd;lakjsdaljd<br>
asjhdlajkshdalkjhdalkjd<br>
ahdgasjhdgakjhdgajhdgajdghad<br>
ajhdlajdhalksjdhalksjdhalksjhd<br clear="all">
ajshdlkjasdhlkajhdlakjshdalkjshd...</div>
<div class="bottom">
<table width="100%">
<tr>
<td>Poster:</td><td><strong>Naam van poster</strong></td>
<td> </td>
<td>Datum:</td><td><strong>19-03-2006 00:00</strong></td>
</tr>
</table></div>
(zelfde CSS)
geeft:
