проблема с двумя блоками css

[123456789igor]

есть вот такая страничка написанная на html javascript и css. Вопрос следующий Текст, который выделен в кружке на картинке, не получается вставить на один уровень с видео. Что-то с блоками в style.css но вот как решить проблему не пойму

часть кода из main.html:

 <section id="content">
    	<div class="container_12">
        	<article class="a1 border-bot extra-wrap">
            <center><iframe width="640" height="480" src="http://www.youtube.com/embed/0FgKQdc96k4" frameborder="0" allowfullscreen></iframe></center></br>
			<article class="a1 border-bot2 extra-wrap">
			<strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.

            </article>
			 </article>
</div>
</div>

И из css:

/********************** Content ************************/

section#content {
	padding:55px 0px 65px 0;

}
	#splash #content {
		background:#090909;
		position:absolute;
		bottom:0;
		top:137px;
		z-index:1;
		left:0;
		right:0;
		overflow:hidden;
		padding:0;
	}
	#splash #advanced {
		position:absolute !important;
	}
	.splash-min-height {
		min-height:300px;
	}

.col-1 {
	float:left;
	width:183px;
	margin:0 35px 0 0;
}
.col-2 {
	float:left;
	width:183px;
}
.map-container {
	margin:0 0 25px 0;
}
.map-container iframe {
	width:270px;
	height:338px;
	margin:0;
	border:none;
}
.adress {padding:0;}
.adress dt {
	display:block;
	font-weight:normal;
	color:#fff;
	font-size:14px;
	line-height:26px;
	padding:0 0 8px 0;
}
.adress dd {
	font-size:14px;
	line-height:26px;
	color:#9b9a9a;
	overflow:hidden;
}
.adress dd span {
	float:left;
	width:82px;
}

.content-box {
	width:940px;
	margin:0 auto;
	padding:0;
}
.inner-404 {
	background:url(../images/page404-img.jpg)/*tpa=http://static.livedemo00.template-help.com/wt_40504/images/page404-img.jpg*/ no-repeat 0 0;
	padding:0 0 0 640px;
	min-height:340px;
}
.heading-404 {
	display:block;
	color:#fff;
	font-weight:normal;
	font-family: 'Oswald', sans-serif;
	font-size:48px;
	line-height:55px;
}
strong.heading-404 {
}
b.heading-404 {
	font-size:42px;
	margin:-6px 0 22px 0;
}
.inner-404 p {
	font-size:14px;
	line-height:26px;
	padding:0 0 10px 0;
	color:#9b9a9a;
}

ещё

.extra-wrap{
	overflow:hidden;
	display:block;
}

.border-bot {
    padding:0px 86% 30px 0;
	/*padding-bottom:20px; */
	margin-bottom:29px;
	border-bottom:1px solid #1d1d1d;
}

.border-bot2 {
 padding:0px 0px 0px 660px;
 width:560px;
	/*padding-bottom:20px; */
	margin-bottom:129px;
	border-bottom:1px solid #1d1d1d;
}

.a1 {margin:0 10px;}

.container_12{margin-left:auto;margin-right:auto;width:1000px;position:relative;}

[ar00]

<article class="a1 border-bot2 extra-wrap">

<strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.

</article>

Article - блочный элемент. Разреши обтекание слева - float:right;

[solovets-denis]

Не стоит вкладывать article в article, это как-то нелогично. Вашу проблему решит float и заданный width.

[123456789igor]

добавил float и все совсем перекосило

Может с html и css проще будет

вот они

http://rusfolder.com/32333233

[USF]

качать как-то лениво.

онлайн верианта у вас нет?

[123456789igor]

http://demo3285.atservers.net/

а если делать так:

<article class="a1 border-bot extra-wrap">
            <iframe width="640" height="480" src="http://www.youtube.com/embed/0FgKQdc96k4" frameborder="0" allowfullscreen></iframe>
            Right Sidebar: Integer velit. Vestibulum ni
        </article> 

при

.border-bot {
        /* float:left; */
        padding:0px 86% 30px 0;
	margin-bottom:29px;
	border-bottom:1px solid #1d1d1d;

то видео и надпись располагаются просто друг под другом при float:left все сносит и перекашивает

[123456789igor]

Все проблема решена. Решил свою проблему с помощью grid.css

<div class="wrapper"> 
         <div class="grid_8">
        <iframe width="640" height="480" src="http://www.youtube.com/embed/0FgKQdc96k4" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="grid_4">
          <p><strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, </p>
      </div> 
</div> 
</br></br>