html - alignment not showing up correctly on wordpress -


i having issue wordpress aligning logos using text widget. when build html , css locally or on jsfiddle, works when try replicate on wordpress comes out funny. here site logos on write hand side , here code using jsfiddle of code.

could tell me need make same on wordpress on fiddle (i.e 2 columns of logos)

<!doctype html>         <html>     <head>         <title>put in title</title>         <style>             .association_logos_container_left              {                 max-width:140px;                 float:right;             }             .association_logos_container_left .association_logos_left img             {                 max-width:100px;                 float:left;                 margin: 5px;                 display:block;               }               .association_logos_container_right {                 max-width:140px;                 float:right;             }             .association_logos_container_right .association_logos_right img             {                 max-width:100px;                 float:right;                 margin: 5px;                 display: block;             }         </style>     </head>     <body>          <div class="association_logos_container_left">          <div class="association_logos_left"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/tusla-logo.jpeg" alt="tusla"></div>         <div class="association_logos_left"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/turning-point-logo.png" alt="turning point"></div>         <div class="association_logos_left"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/parenting-plus.jpeg" alt="parenting plus"></div>         <div class="association_logos_left"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/living-life-logo.jpeg" alt="living life"></div>         <div class="association_logos_left"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/incredible-years.jpeg" alt="incredible years"></div>     </div>          <div class="association_logos_container_right">           <div class="association_logos_right"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/iacp-logo.jpeg" alt="iacp"></div>         <div class="association_logos_right"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/hse-logo.jpeg" alt="hse logo"></div>         <div class="association_logos_right"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/dit-logo.jpeg" alt="dit logo"></div>         <div class="association_logos_right"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/dcu-logo.jpeg" alt="dcu logo"></div>         <div class="association_logos_right"><img src="http://www.taranoone.ie/wp-content/uploads/2015/10/crawford-art-college-logo.jpeg" alt="crawford art college"></div>       </div>      </body>     </html> 

try add @ end of css file

.association_logos_container_left {   display: inline-block;   width: 50%; }  .association_logos_container_right {   display: inline-block;   float: right;   max-width: 140px; } 

edit

or can add

.association_logos_container_left {   display: inline-block; } 

Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -