Trouble formatting a 3rd party widget with CSS - html

Question

I recently took on a project building a website for a friend of mine. It's a real estate website and you can view it here.
The site uses and IDX to pull data from an MLS. An MLS is a multiple listing service which posts homes for sale and gives a lot of information on them, the IDX (internet data exchange) grabs that information and populates it to your website. It's not cheap either, in my opinion anyway.
The thing with using an IDX, well the IDX my client uses anyway, which is IDX Broker is that their code is in place for the widgets and pages. It's editable, but there are only a handful of styles they have in place. If you want something to look different, you have to edit their css.
I know some css, but not as much as I'd like, and I can't get this code for a widget I want redesigned to do what I want.
What I want is the image to be on the left, and the data (text) to be on the right, probably in two columns, and to be aligned with the image. This widget was originally designed with the image on top and the text center aligned below it, which is the code I started from for this widget. I changed a few things to get the text on the right hand side and the image on the left (float: left;), and I changed the image size to be 350px in height and width. The text on the right side is against the top of the container, and is not aligned well with the image. Also, the images appear in different sizes and appear to have different margin sizes. I'm not sure why this is, but I'm guessing it has something to do with the images on the MLS site, where they are pulled from. I've played around a ton with trying to add float, margins, and align-center to try to get things to look well, but I've had no luck. The selectors used are the ones which were set in place by IDX and ones I must use. It appears it is formatted with tables, rows and cells, but I'm not certain what and where changes to these are affecting. There is also a class selector with a pseudo class called #IDX-showcaseGallery-35264 .IDX-showcaseLink:before which I'm not sure what is or does. I do know I had to change the width in this from 100% to auto in order to get the text on the right hand side of the image, without it being below the image.
Anyway, I'll paste the code below. Any and all help is greatly appreciated.
#IDX-showcaseGallery-35264.IDX-showcaseTable {
table-layout:fixed;
border-spacing:8px;
font-size:11px; }
#IDX-showcaseGallery-35264 .IDX-showcaseRow {
display:table-row; }
#IDX-showcaseGallery-35264 .IDX-showcaseCell {
display:table-cell; margin-top:20px;
}
#IDX-showcaseGallery-35264 .IDX-showcaseContainer {
border:1px solid #666;
-webkit-box-shadow: 1px 1px 3px rgba(22,22,22,.4);
box-shadow: 1px 1px 3px rgba(22,22,22,.4);
padding:3px;
}
#IDX-showcaseGallery-35264 .IDX-showcaseLink {
height: 100%;
width: auto;
font-size: 0;
text-align: center;
display: inline-block;
float: left;
}
#IDX-showcaseGallery-35264 .IDX-showcaseLink:before {
content: "";
display: inline-block;
vertical-align: middle;
}
#IDX-showcaseGallery-35264 .IDX-showcasePhoto {
height: 350px;
width: 350px;
display: inline-block;
float: left;
}
#IDX-showcaseGallery-35264 .IDX-showcaseCell div {
text-align: center;}
/*#IDX-showcaseGallery-35264 .IDX-showcaseListingID,
#IDX-showcaseGallery-35264 .IDX-showcaseBeds,
#IDX-showcaseGallery-35264 .IDX-showcaseBaths,
#IDX-showcaseGallery-35264 .IDX-showcaseFull,
#IDX-showcaseGallery-35264 .IDX-showcasePartial,
#IDX-showcaseGallery-35264 .IDX-showcaseRemarks,
#IDX-showcaseGallery-35264 .IDX-showcaseDisclaimerLink,
#IDX-showcaseGallery-35264 .IDX-showcaseStatus,*/
#IDX-showcaseGallery-35264 .IDX-showcaseStateAbrv {display:none;}
#IDX-showcaseGallery-35264 .IDX-showcaseContainer {
position:relative;
margin-top: 40px;}

Answer 1

Consider using "!important" in your 'custom css' to overwrite plugin's default css.
For instance:
#IDX-showcaseGallery-35264 .IDX-showcasePhoto {
height: 350px!important;
width: 350px!important;
display: inline-block!important;
float: left!important;
}