Robiłem w ubiegłą sobotę coś podobnego. Ale nie na tabelach. Może Ci się przyda (dostosowałem układ do Twoich potrzeb; wymiarowanie na moje potrzeby).
Style:
.tekst {
float: left;
width: 400px;/*lub inna wg potrzeby*/
height: 400px;/*lub inna wg potrzeby*/
overflow: scroll;/*jezeli tekst nie miesci się w poodanym obszarze*/
}
.grafika {
float: right;
width: 199px;/*nie mniej niz szer. obrazka*/
height: 400px;/*nie mniej niz wys. obrazka (potrzebne jezeli uzywa sie obramowania)*/
border-left: 1px solid black;/*można usunac*/
}
.baner {
border-top: 1px solid black;/*można usunac*/
}
.pojemnik {
/*szerokosc pojemnika = szer. tekstu + szer. grafiki + szer. obramowania
i nie mnie niż szer. banera + szer. obramowania!*/
width: 732px;
margin: 20px auto;/*lub inne*/
border: 1px solid black;/*można usunac*/
}
/*potrzebne jezeli uzywa sie obramowania*/
br.czyszczenie {
clear: both;
}
Użycie:
<div class="pojemnik">
<div class="tekst">
<h4>Miejsce na tekst</h4>
</div>
<div class="grafika">
<h4>Miejsce na grafikę</h4>
</div>
<br class="czyszczenie" />
<div class="baner">
<h4>Miejsce na baner</h4>
</div>
</div>
Oczywiście usuwając ramki musisz odpowiednio zmodyfikować szerokości w poszczególnych klasach. Wysokość w klasie tekst powinna odpowiadać wysokości w klasie grafika.
To nie jest moja specjalność, więc zapewne są lepsze rozwiązania.