I have just re-done my website at www.chartoonz.com
I have created a wrapper div in which I have placed a div with a links to my videos on vimeo. I float this div left, next to it I have floated a div with some text about the movie and floated it right. The columns look ok, until the window resizes. Then they overlap terrribly and I cannot figure out why. In the event of a narrow window resize, I want the right float column to jump underneath the left floated column.
The relevant HTML looks like this:
<div id="CopyWrapper" >
<div class = "copyFloatLeft">
<p><strong>Use Video to Communicate.</strong></p>
<p><iframe src="//player.vimeo.com/video/90334225" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></p>
<br />
</p>
<br /><br />
</div>
<div class = "copyFloatRight">
<strong>Corporate Communications</strong>
<p> Corporate communications can be greatly enhanced through a well presented video. Ideas and concepts are easier to understand when they can be seen clearly and their meaning is made plain. Here, I present some of the work I did over the last few months, helping the Merrill Lynch digital advertising division get their message out.</p>
</div>
<br />
</div>
<br class="clearFloat" />
The governing CSS looks like this:
#CopyWrapper{
background: center;
text-align: left;
display: block;
float: left;
width: 65%;
padding-left: 200px;
position: relative;
margin: 0 auto;
clear: both;
overflow: hidden;
}
.copyFloatLeft{
background: center;
width: 45%;
margin:5px;
padding: 15px 15px 5px 15px;
position: relative;
clear: right;
float: left;
display: block;
}
.copyFloatRight{
background: center;
width: 45%;
margin:5px;
padding: 15px 15px 5px 15px;
position: relative;
clear: right;
float: right;
display: block;
}
Any help would be appreciated.
Aharon
.copyFloatLeft
and .copyFloatRight
blocks should both float to the left
and for the iframes I would do something like:
#CopyWrapper iframe {
width: 100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.