Hoe krijg ik deze div's naast elkaar?

Hallo ik wil <div class="floatright"> helemaal rechts naast <div class="midden"> maar tot nu toe lukt het niet. Wat doe ik verkeerd. Het zijn in totaal drie div's naast elkaar (eerste twee zijn gelukt, de laatste lukt niet):

<div class="floatleft">
<table width="600" border="0" cellspacing="0">
<tr>
<th width="285" height="185" scope="row"><img src="img/house 1.jpg" width="285" height="177"><p class="infoblok">Lees hier meer over, <br>
wij vertellen het u graag. <a class="meerinfo" href="x">>></a></p></th>
<td width="17"></td>
<td width="285"><img src="img/house 2.jpg" width="285" height="177">
<p class="infoblok">Welke buurt het beste bij u past? <br>
U leest het in de buurtengids. <a class="meerinfo" href="x">>></a></p></td>
</tr>

<tr>
<th height="177" scope="row"><img src="img/house 3.jpg" width="285" height="177"><p class="infoblok">Lees hier meer, <br>
wij vertellen het u graag. <a class="meerinfo" href="x">>></a></p></th>
<td></td>
<td><img src="img/house 4.jpg" width="285" height="177"> <p class="infoblok">Uw woning op? <br>
Wij helpen u graag. <a class="meerinfo" href="x">>></a></p></td>
</tr>
</table>
<div style="width:600px"><p><span><h2>Over</h2></span></p></div>
<p><span style="color:#3399cc">jjjjjjjjjjkkkk</span></p>
<div style="width:600px"><p style="width:600px">tekst<a href="x">Lees verder>></a></p></div>
</div>

<div class="midden">
<ul>

<div class="blokhome"><block><a href="#"><img src="golden_gate.jpg" width="240px 100px"></a>
<p>
<span style="color:#3399cc">KOOPHUIS</span><br>
3 slpkmrs 1 bdkmr<br>
<a class="meerinfo" href="x">meer info</a></p>
</block>
</div>

<div class="blokhome"><block><a href="#"><img src="golden_gate.jpg" width="240px 100px"></a><p><span style="color:#3399cc">HUURHUIS</span><br>
3 slpkmrs 2 bdkmr<br>
<a class="meerinfo" href="x">meer info</a></p></block></div>

<div class="blokhome"><block><a href="#"><img src="golden_gate.jpg" width="240px 100px"></a><p><span style="color:#3399cc">VAKANTIEHUIS</span><br>
1 slpkmr 1 bdkmr<br>
<a class="meerinfo" href="x">meer info</a></p></block></div>
</ul>
</div>
<div class="floatright">
<?php
include 'socialmediabuttons.php';
?>
</div>


}
.floatright {
float: right;
position: absolute;
margin-left: 1100px;
}

.midden {
float: none;
margin-right: 132px;
margin-top: -5px;
clear: both;
margin-left: 583px;
}
.floatleft {
float: left;
margin-left: 0px;
margin-right: 10px;
margin-top: 10px;
position: absolute;
overflow: hidden;
visibility: visible;
}

Als ik het even in een Gedit textbestandje zet en het html maak, dan opent het in Firefox en zie ik dat het 2 om 2 staat.
De derde zal niet lukken vanwege de breedte van je website, bedenk ik mij logisch.

Ik heb dat weleens gehad, ook met een tabel en dan kon het niet vanwege de breedte.
Net zoals je foto's neerzet en dan als ze iets te groot zijn, passen ze ook niet alle 3 naast elkaar en moet je ze of kleiner maken of je bladzijde moet breder.

Waar werk je verder mee, is dit in Wordpress of wat? Staat dit zo op een website met een rechtermenu of linkermenu, zodat de bladzijde minder breed wordt?
Want dan zal het niet passen.

okay thanks femke, ik werk met dreamweaver maar heb een ingesteld dat de body een bepaalde grote mag hebben. ik ga ff iets aanpassen.

Of je moet de tabellen/divs kleiner maken ipv de body.
Maar ik weet niet of je dat wel wilt.

Is het al gelukt met de body vergroten?

Hi,

Leuk dat je ff om de update vraagt. Het lag niet aan de body. De oplossing is:
div floatright
div floatleft
div center in-line block

de floats moeten achter elkaar komen, dat is belangrijk.
Maar nu heb ik problemen met div floatright, de rand gaat dan over de hele body ipv om het tekstblokje. heel hinderlijk....