Apologies in advance, as I am new to this! I am currently working within a CMS for my company and attempting to utilize div tags instead of tables to align content properly for our adaptive mobile site.
My issue lies in trying to embed a YouTube video within a 3 div/column layout. While I can successfully display 3 divs across with percentage width using float and make the YouTube embed responsive on its own page, combining the two seems to be causing a conflict. Here is the code I am working with:
<style type="text/css">
.embed-box {
position: relative;
padding-bottom: 62.25%;
/* ratio for youtube embed */ padding-top: 30px;
height: auto;
overflow: hidden;
}
.embed-box iframe, .embed-box object, .embed-box embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style><span style="font-size:18px;"><strong>Lehigh Athletics Department Awards and Achievements</strong></span>
<hr /> <span style="font-size:16px;"><strong>Highlights of 2013-2014 Convocation</strong></span>
<div class="bottom">
<div style="float: left; width: 33%;">
<img style="" src="/common/controls/image_handler.aspx?thumb_id=0&image_path=/images/2014/5/6/ProgramIcon.png" />
</div>
<div class="embed-box">
<div style="float: left; width: 33%;">
<iframe src="http://www.youtube.com/embed/zQmxGbFbgXc" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
<div style="float: left; width: 33%;">
<img style="" src="/common/controls/image_handler.aspx?thumb_id=0&image_path=/images/2014/5/6/ProgramIcon.png" />
</div>
</div>