Проблема С Двумя Блоками Css

123456789igor

Active member
12.01.2011
29
0
#1

есть вот такая страничка написанная на html javascript и css. Вопрос следующий Текст, который выделен в кружке на картинке, не получается вставить на один уровень с видео. Что-то с блоками в style.css но вот как решить проблему не пойму
часть кода из main.html:
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:
HTML:
/********************** 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;
}
ещё
HTML:
.extra-wrap{
overflow:hidden;
display:block;
}
HTML:
.border-bot {
padding:0px 86% 30px 0;
/*padding-bottom:20px; */
margin-bottom:29px;
border-bottom:1px solid #1d1d1d;
}

HTML:
.border-bot2 {
padding:0px 0px 0px 660px;
width:560px;
/*padding-bottom:20px; */
margin-bottom:129px;
border-bottom:1px solid #1d1d1d;
}
HTML:
.a1 {margin:0 10px;}
HTML:
.container_12{margin-left:auto;margin-right:auto;width:1000px;position:relative;}
 

123456789igor

Active member
12.01.2011
29
0
#3
а если делать так:
Код:
<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

Active member
12.01.2011
29
0
#6
Все проблема решена. Решил свою проблему с помощью 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>