DIV con contenuto non corretto

[Valeria75_bis]

Ciao ho una pagina che visualizza:

- un'area superiore
- 3 box uno accanto all'altro: su due righe, parte sopra "titolo" (immagine), parte sotto "contenuto"
- 3 box uno accanto all'altro, per il footer

La struttura della pagina è corretta, il problema è che quando cerco di inserire del testo nell'area "contenuto" dei 3 box, se non utilizzo i
il box si "allunga" causando lo spostamento (sotto) del/dei box accanto

<div id="wrap" align="center">
<div id="main">

<div id="banner" align="center">
.....
</div>

<div class="content">
    <div class="bar" id="BarSSSSSS"></div>
    <div align="center">

    </div>
</div>

<div class="content">
    <div class="bar" id="BarEEEEEEE"></div>
    <div align="left">
        <img ...>
        dnskfasklf dsfsdfjds fsdkfj dsfdjs klfkldsf dsklf jdsklfj dsfjldsfds
    </div>
</div>

<div class="content">
    <div class="bar" id="BarNNNNNNN"></div>
    <div align="left">

.......
    </div>
</div>

<div class="footer">
    <div class="bar" id="FooterBar1"></div>
</div>

<div class="footer">
    <div class="bar" id="FooterBar2"></div>
</div>

<div class="footer">
    <div class="bar" id="FooterBar3"></div>
</div>

</div> 

Le 3 aree:

BarSSSSS
BarEEEEE
BarNNNNN

Contengono l'immagine del titolo di ogni box


Se inserisco il contenuto (esempio nell'area di BarEEEEE)

dnskfasklf dsfsdfjds fsdkfj dsfdjs klfkldsf dsklf jdsklfj dsfjldsfds

il testo è nella stessa riga (non va a capo automaticamente in base alla dimensione del box) e quindi la struttura risulta modificata.

io vorrei avere 3 box (titolo e contenuto) fixed

Grazie

body
{
    margin:0;
    padding:0;
    background:#3b6279 url(images/background.png)  repeat-x center ;
    height:750px
}


#wrap
{
    width: 100%;   
    height: 100%;
}

#main
{
    width: 980px;   
    height: 100%;
}

#main p
{
    padding: 10px;
}

#menu
{
    margin-top: 100px;
    width: 980px;   
    background: #ffffff;
}

#banner
{
    margin-top: 8px;
    width: 980px;
}

#bar
{
    margin-left: 0px;
    width: 980px;
}


div.content
{
    float: left;
}

div.content div.bar
{
    height: 60px;
}


div.footer
{
    width: 33%;
    float: left;
}

div.footer div.bar
{
    height: 70px;
}


#BarSSSSSS
{
    width: 518px;
    margin-top: 8px;
    height: 58px;
    background: url(images/bar_SSSSSS.png) no-repeat;
}

#BarEEEEEEE
{
    width: 231px;
    margin-top: 8px;
    height: 58px;
    background: url(images/bar_evidenza.png) no-repeat;
}

#BarNNNNNNN
{
    width: 231px;
    margin-top: 8px;   
    height: 58px;
    background: url(images/bar_evidenza.png) no-repeat;
}


</div>