how to divide page in two percentially divided rows containing iframes

Hello, I'm beginner in CSS so I have problems with dividing my page like in this picture.

The site I need it is Online Radio Station.
This is the main domain: http://radio-pendimi.com
I have Joomla CMS installed to this folder ../webi and live3.php file which streams online the radio. I need to use this because I want the radio player to plays automatically and to dont interrupt the stream while reading articles on the Joomla CMS.

Now it is using <frameset>tag but because it is out of support already and it gives me problems when I browse the site in Chrome. The radio player loads fine but the site doesnt load completely.

Thanks in advance

PS: I need it urgently so if anyone can help me please Help me.

 

You really shouldn't use frames. It's no longer supported, so you will always have problems when people are visiting the site. Why not have a link you can click in the sidebar that will open a window with the player in it? That way, the browsing of the site is uninterrupted and you can have a valid website.

 

You won't be able to style your iframe with CSS. Instead, place the iframe inside of a div with an ID that you can style:

<div id="frame1">
<iframe src="" width="" height="">
</div>
<div id="frame2">
<iframe src="" width="" height="">
</div>

HTML:

Set the width and height of the two divs the same as your iframes with CSS:

#frame1{
width:800px;
height:400px;
}
#frame2{
width:800px;
height:400px;
}

Code (markup):

A better approach would be to skip the iframes and use php includes. Later, if you need to refresh one div's content you could do that with a jQuery call:
$('#frame1').load(frame1.php);