Link to home
Create AccountLog in
Avatar of Dan Violet Sagmiller (He/Him)
Dan Violet Sagmiller (He/Him)Flag for United States of America

asked on

Can't get CSS Side by Side divs to work with youtube

I have been trying to get css to get 2 divs to show side by side.  While float: left appears to work on most things, it doesn't appear to work with Youtube's Html 5 player.

Link to the actual page.

NOTE: the page dynamically updates based on the video time, so you don't see any side values until about 8 seconds into the video.

Here is the CSS:
div#player {
    width: 640px;
    height: 480px;
    float: left;
    text-align: left;
}
div#content {
    width: 200px;
    float: right;
    text-align: left;
}
.clear { 
    clear: both;
}

Open in new window


Here is the HTML:  (populated by javascript)
<div id="player"></div>
<div id="content"></div>
<div class="clear"></div>

Open in new window


User generated image
Any ideas?
Avatar of APoPhySpt
APoPhySpt
Flag of Portugal image

I'm using firefox latest version, and it displays fine...
but I've seen this kind of issue before, perhaps you are trying to insert 2 divs side by side and there is not enough space for it on the parent container
Avatar of Dan Violet Sagmiller (He/Him)

ASKER

plenty of space.  Padding/margin/widths are all measured.  there is an extra 20 px to spare.

Any ideas why it might not work in chrome?  or is it just my copy?
let me try on chrome
ASKER CERTIFIED SOLUTION
Avatar of APoPhySpt
APoPhySpt
Flag of Portugal image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Worked as well as a TD, and it wasn't a TD!  :D