css - Horizontally Display Elements -

i using me cooking plus recipe plugin wordpress. display post image , post titles in recipe index horizontally (like site: http://foodfitnessfreshair.com/recipes/) instead of having them stacked vertically. i've tried display:inline, display:inline-block, , pretty find relevant displaying lists & tables horizontally.

here link site.

here plugin css:

/* container plugin */ .gmc-recipe {     overflow: hidden;     *zoom: 1;     padding: 10px;     position: relative; } .entry-content .gmc-recipe table {     width: auto;     font-size: inherit;     color: inherit; } .entry-content .gmc-recipe table td {     border: 0; } h2.gmc-recipe-title {     float: left;     width: inherit;     vertical-align: top;     margin-top: 0 !important;     padding-top: 0 !important;     max-width: 80%; } a.gmc-print-options {     float: right;     font-size: 0.8em;     text-align: right;     /*width: 85px / / if printer icon not on same line / / words "print recipe" uncomment */ } .gmc-clear-both {     clear: both; } .gmc-recipe-main-photo {     display: inline;     float: left;     margin-bottom: 10px; } .gmc-recipe-main-photo img {     height: auto;     width: auto; } /*the information next main photo */  .entry-content table.gmc-recipe-summary, .entry-content table.gmc-recipe-summary-narrow {     border: 0;     border-spacing: 0;     float: right;     padding: 0 0 10px 0;     margin: 0; } .entry-content table.gmc-recipe-summary {     width: 250px;     font-size: 0.8em; } .entry-content table.gmc-recipe-summary-narrow {     clear: left;     float: left;     width: auto; } .entry-content .gmc-recipe-summary td, .entry-content .gmc-recipe-summary-narrow td {     border: 0;     padding-top: 0;     padding-bottom: 2px; } td.gmc-heading, td.gmc-heading-narrow {     font-weight: bold;     padding-right: 10px;     text-align: right;     vertical-align: text-top;     /* if "total time" shows on 2 lines, increase width */ } td.gmc-heading {     width: 70px; } .no-main-photo td:first-child {     width: inherit; } .gmc-recipe-description {     display: none;     visibility: hidden; } .gmc-recipe-ingredients {     clear: both; } ul.gmc-ingredient-list {     clear: left; } table.gmc-step-list {     margin: 0;     padding: 0; } .gmc-recipe-steps h2 {     clear: both; } .entry-content table.gmc-step-list, .gmc-step-list-item td, td.gmc-step-list-title, td.gmc-group-list-title, td.gmc-step-list-title-wide {     border: none; } td.gmc-group-list-title {     font-weight: bold;     padding: 0; } .gmc-group-list-title-wide {     font-weight: bold;     width: 12%; } .entry-content td.gmc-step-list-title {     font-weight: bold;     padding: 0; } .gmc-step-list-title-wide {     font-weight: bold;     width: 12%; } .gmc-step-list-item td {     padding-bottom: 10px;     padding-top: 0;     vertical-align: top;     text-align: inherit; } img.gmc-step-photo {     width: 150px;     height: auto;     max-width: inherit !important;     padding-top: 5px; } .gmc-img-right {     float: right; } .gmc-powered-by {     font-size: 0.7em;     text-align: right; } table.no-main-photo {     float: left;     width: inherit;     font-size: inherit; } .gmc-web-hidden {     display: none; } ul.gmc-print-options-box, ul.gmc-print-options-box li {     padding: 0;     margin: 0;     list-style: none; } .gmc-print-area {     position: absolute;     right: 5px;     top: 10px; } .gmc-print-area img {     padding: 0 5px 0 0;     margin: 0;     border: none;     vertical-align: text-bottom; } ul.gmc-print-options-box {     clear: both;     margin: 0;     padding: 5px 5px 0;     float: right;     border: solid 1px black;     clear: both;     position: relative;     background-color: white; } .gmc-print-options-box li {     color: #555555;     font-weight: bold;     display: block;     padding: 4px;     text-decoration: none; } .gmc-print-options-box li a:hover {     color: #999999; } ul.gmc_no_list_item {     list-style: none;     margin-left: 0; } .gmc_list_title {     vertical-align: middle; } ** > table.gmc_recipe_list, table.gmc_recipe_list td {     border: none; } table.gmc_recipe_list td {     vertical-align: middle; } table.gmc_recipe_list img {     text-align: right;     padding-left: 10px;     padding-right: 10px; } ** .gmc-nutrition-summary, .gmc-nutrition-advanced {     clear: both; } .gmc-nutrition-summary td, .gmc-nutrition-summary th {     border: 0; } .gmc-nutrition-summary th, .gmc-nutrition-summary td, .gmc-nutrition-advanced th, td.gmc_per_serving, td.gmc_100g, td.gmc_gda {     text-align: center; } .gmc-nutrition-summary th {     font-weight: bold; } td.gmc-nutrition-serving {     text-align: left; } span.gmc-nutrition-serving {     font-weight: bold; } @media print {     font-family:"times new roman", "ms georgia", serif;     font-size: 12pt;     tr, img {         page-break-inside: avoid;     }     .gmc-print-hidden, ul.gmc-print-options-box {         display: none !important;     }     .gmc-web-hidden {         display: block !important;     } } 

thanks in advance!

the ideal solution change html. images , text on page being displayed in tables. tables not ideal positioning content , isn't recommended try float rows , cells. website you're referencing containing images , captions within floated divs, better positioning. can if change html in plugin include following:

.my_floated_div {     float: left;     width: 20%; } .gmc_list_title {     float: left;     text-align: center; }  <div class="gmc_recipe_list">     <div class="my_floated_div">         <a href="http://pathtomypost"><img src="http://pathtomyimage"></a>         <span class="gmc_list_title">my image caption</a>     </div> </div> 

however, if find absolutely cannot edit html, adding css may give similar result:

td.image {     display: block; } .gmc_recipe_list tr, td.gmc_list_title {     float:left; }