Question

Live site.

After testing a site I’m working on, I’ve discovered a weird break that occurs only in Chrome and Safari. Everything looks fine in Firefox.

Welcome to BodywoRx

    <div class="banner-image">
        <img src="<?php echo get_template_directory_uri(); ?>/img/large.jpg" alt="about-place-holder" id="aph" />
    </div><!-- end banner-image -->
    <p>Body WoRx was founded on the belief that many dysfunctions of the body can be healed through massage therapy.  In a world where prescriptions are written for variety of symptoms, we offer an alternative solution to helping the body heal itself.  We are located in historic downtown Grand Prairie, conveniently centered between Fort Worth and Dallas.</p>
    <div class="bio">
        <img src="<?php echo get_template_directory_uri(); ?>/img/bridgett.jpg" alt="bridgett-freiburger" id="bf" />
        <p>Bridgett suffered from chronic neck, back, and shoulder pain for many years.  She went to many doctors, specialists, had many MRI&apos;s, but no one knew what was causing the pain.  She had been prescribed countless medications to help ease discomfort, but nothing to address the cause.  Bridgett stumbled across massage therapy and has since become a firm believer and advocate in its many benefits and healing properties.  Before getting into massage therapy, Bridgett served in the Marine Corps, and then continued supporting the war fighter while working at Bell Helicopter. Bridgett is a graduate of North Texas School of Swedish Massage.</p>
    </div><!-- end bio -->
</div><!-- end about -->

I’m sure it’s something minor, I just can’t quite figure it out. Any ideas? Thank you.

Answer 1

Try using float on the second image.

.bio img {
    float: left;
}

JS Fiddle: http://jsfiddle.net/J4MK4/2/