Здравствуйте, у меня есть пара вопросов. Мне студентка дала // написала скрипт для выдвигающихся окон в таблице, вот это

Код:

<style type="text/css">
#part1,#part2,#part3,#part4 {
z-index: 2;
position: absolute;
visibility: hidden}
</style>

Код:

<script language="JavaScript">
function part1ON() {document.getElementById("part1").style.visibility='visible'}
function part2ON(){document.getElementById("part2").style.visibility='visible'}
function part3ON(){document.getElementById("part3").style.visibility='visible'}
function part4ON(){document.getElementById("part4").style.visibility='visible'}
function part1OFF() {document.getElementById("part1").style.visibility='hidden'}
function part2OFF(){document.getElementById("part2").style.visibility='hidden'}
function part3OFF(){document.getElementById("part3").style.visibility='hidden'}
function part4OFF(){document.getElementById("part4").style.visibility='hidden'}
</script>

Код:

<a href="" onMouseOver="part1ON()" onMouseOut="part1OFF()">Линка 1</a>
<a href="" onMouseOver="part2ON()" onMouseOut="part2OFF()">Линка 2</a>
<a href="" onMouseOver="part3ON()" onMouseOut="part3OFF()">Линка3</a>
<a href="" onMouseOver="part4ON()" onMouseOut="part4OFF()">Линка 4</a>

<div id="part1" class="container">
Контейнер номер 1
</div>

<div id=part2 class="container">
Контейнер номер 2
</div>

<div id=part3 class="container">
Контейнер номер 3
</div>

<div id="part4" class="container">
Контейнер номер 4
</div>

Так вот.. у меня маленькая проблемка. Как сделать чтобы эти четыре раздела не теснились в углу, а былы распределены по всей линии? И когда вылезает окошко, у него нет фона и текст налезает на тот, что снизу.
И последний вопрос, картинку отдельным кодом кидать под это?