Chrome float trouble

HTML & CSS
1

Hi,
this http://mytube.blogial.net/
layout works fine in FF, IE, Opera but it doesn’t work in Chrome
(#list-videos-playlist goes down instead to set to the same level)

This is the simply rules:


#header,#nav,#section,#footer {
    width:940px;
}
#ytplayer{
    width:640px;
    height: 390px; 
}
#list-videos-playlist{
    width:294px;
    padding:5px 3px 5px 3px;
    height: 380px;
}

Could you help me, please ?

Bye.

2

I don’t have any testing facility for Chrome so i’m not 100% sure but can it be the overflow:auto;? Did you try to change that to overflow:hidden;

3

Make your <div id=“ytplayer”> float left (you have that, but read further please).

The div is a block level element. That means


    <!-- Start show-video --> 
[COLOR="Red"]<div id="ytplayer"> [/COLOR]
You need Flash player 8+ and JavaScript enabled to view yt video.
</div> 
[COLOR="red"]<div id="list-videos-playlist">[/COLOR] 
    </div> 
<!-- End show-video -->

both div account for a line of its own. Only that, for them to be on the same line, you need to float the first div. Otherwise, the first div will make the second div dropdown a line. And so, the second div will float right on the next line, instead of floating on the first line, alongside the first div.

In Chrome, the <div id=“ytplayer”> is replaced by the flash object, as you code in JS, in a different way than in the other UAs. Probably due to native flash support Chrome offers. That replacement means you have to float left the object: even though you have

#ytplayer{

    float:left;

    background: #000;

}

the <div id=“ytplayer”> doesn’t exist anymore.

Find a way to CSS target the object, in the JS code you use to create the flash object, and put float:left on it.

4 

#ytplayer,#ytPlayerObj{
    float:left;
    background: #000;
}

Thanks just a lot :slight_smile:

5

No problem :slight_smile: