Konflikt s obrazkama

Zdravím. Mam takovy mensi problemek. Chci dat dva obrazky (mozna i vice) vedle sebe na radek v bloku, na ktery je aplikovan div s externim stylopisem. Problem je, ze kdyz vlozim obrazky normalne za sebe, chci aby se zobrazily vedle sebe, ale druhy a kazdy dalsi obrazek se automaticky posune o radek nize.

Mozna jsem to napsal trochu zkomolene, tka to zkusim zjednodusit:

<div class="stred">
<p class="odstavec">
<img src="neco.jpg">
<img src="neco2.jpg">
</p>
</div>

Nemam nikde pevne pozicovani, takze bych cekal ze obrazky budou vedle sebe. Jenze ony se skladaji pod sebe:

vysledek:

obrazek
obrazek2
obrazek3

Doufam ze rozumel aspon nekdo a prosim o radu, jak to udelat tak, aby byly normalne vedle sebe.

Dekuji

Martin


EDIT:// prikladam styl:


#stred{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color:#fff;
width:790px;
margin-left:20px;
margin-top:25px;
height: 380px;
overflow: auto;
text-align:left;
}

#leve_menu{
margin:5px;
text-indent:20px;
font-size: 11px;
color:#fff;
}

td{
vertical-align:top;
}

h1{
font-family:sans-serif, Arial;
font-size:20px;
color:#CCCCCC;
}

.tucne{
font-weight:bold;
}

.telo{
color:#FFFFFF;
font-weight:normal;
text-decoration:none;
font-size:10px;
}


a {color: white}
a:hover {color: red}

----------------------------------------------------------------------

a tady je ten kousek kodu, ve kterem to zmatkuje:

<div id="stred">


<span class="tucne">Nadpis</span>
<br />

<img src="images/xsir_lazne_1.JPG" />
<img src="images/xsir_lazne_1.JPG" />

<div class="telo">
Nejaký text.
</div>
</div>

Takže něco podobného se řeší tady - http://www.jakpsatweb.cz/css/priklady/float-neclearovany.html - ve výsledku jde o to, že dám více obrázků za sebou a v případě, že chci udělat mezeru mezi nimi, tak ten druhý odskočí o výšku písma dolů a zůstane přilepený zprava. Chjo..