estructura CSS

[JAI_ME]

he buscado la forma de lograr hacer este esquema con css pero no he podido ubicar el titulo en la posicion indicada les muestro el ejemplo de lo que quiero y les publico lo que he desarrollado

ejemplo.


el codigo que he desarrollado es el siguiente.

<div id="div-noticias">
<h1>Noticias</h1>

<span>
<div id="noticia-publicidad" style="float:left; border:1px solid #999999; background:#F8F4FF; width:260px; height:200px; margin:0 10px 10px 0; ">
</div>

<div id="noticia-titulo" style="float:right">
<h2>Mi Titulo de la Noticia, y que pasa si el texto es mar largo</h2>
</div>

texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia.

</span>
</div>



estilos css

#div-noticias{
float:left;
color:#006699;
text-align:justify;
font-size:13px;
width:97%;
border-bottom:1px dashed #999999;
padding-bottom:10px;
padding-left:15px;
}

#noticia-titulo h2{
text-align:center;
color:#FF3300;
}




El problema es que el titulo se me desconfigura

[samplei]

por ejemplo puedes usar este código:
css

Código:

#todo {width:410px; float:left}
.image {width:200px; float:left}
.headline {width:200px; float:left}
h2 {margin-top:0px}

html

Código:

<div id="todo">
<h1>¿Noticias aqui?</h1>
<div class="image"><img src="webdesign/images/administracion-web.jpg" width="200" height="200" /></div>
<div class="headline"><h2>xxxxxxxxxxxx xxxxxxxxxxx xxxxxxx </h2></div>
<p>dsfsdf odfjsoi pokd¿fs¿´´sd'l 0dkfspofdp jposjpods sfsoifjsoi oidjfosifjosi iosjoisfh8sf sfsodfh8sdfsoid difsoinnoijos98n-fsdf fdsfsf fsdjlfkjslf jskdlfsl fslkfdlk fjslkfdjdslk jfslkfjdslk jfslkfjsdlk jlkdjfslfdlsfkdfslk fsdfs fsfdsfs fdfsdf</p>
<p>dfsfdsf</p>
<p>fsfsfsdf</p>
<p>sdfsf</p>
</div>

o, con tu código:
css

Código:

#div-noticias{
float:left;
color:#006699;
text-align:justify;
font-size:13px;
width:500px;
border-bottom:1px dashed #999999;
padding-bottom:10px;
padding-left:15px;
}

#noticia-titulo h2{
text-align:center;
color:#FF3300;

html

Código:

<div id="div-noticias">
<h1>Noticias</h1>


<div id="noticia-publicidad" style="float:left; border:1px solid #999999; background:#F8F4FF; width:260px; height:200px; margin:0 10px 10px 0; ">
</div>
<div id="noticia-titulo" style="float:left; width:228px">
<h2>Mi Titulo de la Noticia, y que pasa si el texto es mar largo</h2>
</div>
<p>

texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia texto de la noticia.</p>


</div>

[JAI_ME]

mil gracias me funciono.