How to take two div side by side in wordpress - php

Question

I am using Wordpress.
CSS:
fsrep-main-image {
float: left;
margin-right: 8px;
text-align: center;
overflow: hidden
}
fsrep-main-image img {
padding: 1px;
border: 1px solid #CCC;
float:left;
overflow:hidden
}
description {
display:-block;
margin-top:-150px
}
When I open the page in Firefox it works fine, however if I open the same page in Chrome it has issues.
The following image is from Firefox, but in Chrome the description, location and bedroom details goes on the image.
HTML/PHP:
<?php
$PageContent = '<hr/>';
$WPUploadDir = wp_upload_dir();
$FSREPShowMap = $FSREPconfig['GoogleMap'];
if (isset($FSREPMap)) {
if ($FSREPMap == FALSE) {
$FSREPShowMap = FALSE;
}
}
$ListingDetails = $wpdb->get_row("SELECT * FROM ".$wpdb->prefix."fsrep_listings WHERE listing_id = ".$ListingID[0]);
if ($ListingDetails->listing_address_number == '' || $ListingDetails->listing_address_street == '' || $ListingDetails->listing_address_city == '') { $FSREPShowMap = FALSE; }
if ($FSREPconfig['DisplayCurrency'] == 'Yes') { $CurrencyDisplay = ' '.$FSREPconfig['CurrencyType']; } else { $CurrencyDisplay = ''; }
$PageContent .= '<h1>'.fsrep_listing_name_gen($ListingDetails->listing_id, $FSREPconfig['ListingNameDisplay']).'</h1>';
if ($ListingDetails->listing_price_num != '0.00') { $PageContent .= '<span class="listingprice">'; if ($FSREPconfig['ListingPriceID'] != '') { $PageContent .= fsrep_text_translator('FireStorm Real Estate Plugin', $FSREPconfig['ListingPriceID'].' Label', $FSREPconfig['ListingPriceID']).' '; } $PageContent .= $FSREPconfig['Currency'].fsrep_currency_format($ListingDetails->listing_price_num).$CurrencyDisplay.'</span><br />'; }
$PageContent .= '';
$FSREPImageSizes = fsrep_image_sizes();
$FSREPMainImageMargin = $FSREPImageSizes->main[0] + 4;
$FSREPImageMargin = $FSREPImageSizes->main[0] + 2;
$PageContent .='<div id="vertical_menu" style="float:right">
<a onclick=show_desc()>Overview</a>
<hr/>
<a onclick=show_Location()>Location Map</a>
<hr/>
<a onclick=show_enquiry()>Enquiry</a>
</div>';
$PageContent .= '<div id="fsrep-images" style="display:block">';
if (file_exists($WPUploadDir['basedir'].'/fsrep/houses/large/'.$ListingDetails->listing_id.'.jpg')) {
$PageContent .= '<div id="fsrep-main-image" style="width: '.$FSREPMainImageMargin.'px;display:block"><a id="fsrep-main-image-a" href="'.$WPUploadDir['baseurl'].'/fsrep/houses/large/'.$ListingDetails->listing_id.'.jpg" title="View Slideshow" class="thickbox" rel="fsreplisting"><img id="fsrep-main-image-img" src="'.$WPUploadDir['baseurl'].'/fsrep/houses/'.$ListingDetails->listing_id.'.jpg" alt="'.strip_tags(fsrep_listing_name_gen($ListingDetails->listing_id, $FSREPconfig['ListingNameDisplay'])).'" /></a></div>';
}
$PageContent .= '<div id="fsrep-aimages" style="margin-left: '.$FSREPImageMargin.'px; display:block">';
for ($i=1;$i<=50;$i++) {
if (file_exists($WPUploadDir['basedir'].'/fsrep/houses/additional/small/'.$ListingDetails->listing_id.'-'.$i.'.jpg')) {
//$PageContent .= '<div class="fsrep-aimage" id="fsrep-aimage" style="display:block"><img src="'.$WPUploadDir['baseurl'].'/fsrep/houses/additional/small/'.$ListingDetails->listing_id.'-'.$i.'.jpg" class="full" /></div>';
}
}
$PageContent .= '</div>';
if (file_exists($WPUploadDir['basedir'].'/fsrep/houses/large/'.$ListingDetails->listing_id.'.jpg')) {
//$PageContent .= '<div class="fsrep-aimage" id="fsrep-aimage" style="display:block"><img src="'.$WPUploadDir['baseurl'].'/fsrep/houses/small/'.$ListingDetails->listing_id.'.jpg" class="full" /></div>';
}
$PageContent .= '</div>';
$PageContent .= '<div style="clear: both;"></div>';
if ($FSREPShowMap == TRUE) {
$PageContent .= '<div id="location_map" style="display:none;float:left;width:920px">
<div style="margin-top:-150px;width: 80%;"><h2>'.fsrep_text_translator('FireStorm Real Estate Plugin', 'Located in Label', 'Located in').' '.fsrep_get_address_name($ListingDetails->listing_address_city, 'city').', '.fsrep_get_address_name($ListingDetails->listing_address_province, 'province').'</h2>';
// $PageContent .= '<div class="fsrep-aimager">Map</div>';
$PageContent .= '<div id="listings_map" style="width: 80%; height: 400px; border: 1px solid #999999; margin-bottom: 12px;"></div></div></div>';
$PageContent .= '<br />';
}
/*
$AdditionalImages = '';
for ($i=1;$i<=10;$i++) {
if (file_exists($WPUploadDir['basedir'].'/fsrep/houses/additional/small/'.$ListingDetails->listing_id.'-'.$i.'.jpg')) {
$AdditionalImages .= '<td align="center" valign="center"><img src="'.$WPUploadDir['baseurl'].'/fsrep/houses/additional/small/'.$ListingDetails->listing_id.'-'.$i.'.jpg" class="full" /></td>';
if ($i == 4) {
$AdditionalImages .= '</tr><tr>';
}
}
}
if ($AdditionalImages != '') {
$PageContent .= '<h2>Photo Gallery</h2>';
$PageContent .= '<table><tr><td><img src="'.$WPUploadDir['baseurl'].'/fsrep/houses/small/'.$ListingDetails->listing_id.'.jpg" class="full" /></td>'.$AdditionalImages.'</tr></table>';
$PageContent .= '<p> </p>';
}
*/
if (function_exists('fsrep_pro_listing_child')) { $PageContent .= fsrep_pro_listing_child($ListingDetails->listing_id); }
if ($ListingDetails->listing_description != '') {
$PageContent .= '<div id="description" style="display:block;margin-top:-150px;"><h4 style="display:block;">'.fsrep_text_translator('FireStorm Real Estate Plugin', 'Description Label', 'Description').'</h4>';
$PageContent .= '<p>'.stripslashes(nl2br($ListingDetails->listing_description)).'</p>';
}
$PageContent .= '<p> </p></div>';
$Documents = $wpdb->get_results("SELECT * FROM ".$wpdb->prefix."fsrep_listings_docs WHERE listing_id = ".$ListingDetails->listing_id);
if (count($Documents) > 0) {
$PageContent .= '<h2>'.fsrep_text_translator('FireStorm Real Estate Plugin', 'Documents and Support Material Label', 'Documents and Support Material').'</h2>';
$PageContent .= '<p>';
foreach ($Documents as $Documents) {
$PageContent .= ''.str_replace($ListingDetails->listing_id,'',$Documents->document_name).'<br />';
}
$PageContent .= '</p>';
$PageContent .= '<p> </p>';
}
if ($ListingDetails->listing_virtual_tour != '' || $ListingDetails->listing_slideshow != '' || $ListingDetails->listing_video != '') {
$PageContent .= '<h2>'.fsrep_text_translator('FireStorm Real Estate Plugin', 'Videos and Slideshows Label', 'Videos and Slideshows').'</h2>';
$PageContent .= '<p>';
if ($ListingDetails->listing_virtual_tour != '') {
$PageContent .= ''.fsrep_text_translator('FireStorm Real Estate Plugin', 'Virtual Tour Label', 'Virtual Tour').'<br />';
}
if ($ListingDetails->listing_slideshow != '') {
$PageContent .= ''.fsrep_text_translator('FireStorm Real Estate Plugin', 'Slideshow Label', 'Slideshow').'<br />';
}
if ($ListingDetails->listing_video != '') {
$PageContent .= ''.fsrep_text_translator('FireStorm Real Estate Plugin', 'Video Label', 'Video').'<br />';
}
$PageContent .= '</p>';
$PageContent .= '<p> </p>';
}

Answer 1

Try to separate that in two parts using DIV.
Give float:left; to first DIV

Answer 2

You also need to define the width for the image section.Trying to put the image in a container like div or p tag and specified the width for the image section.