Question

I’m trying to layout a page which has anchor elements that I would like on a new line and centered. However these blocks are inside of <p> elements which are beside floating images.

Right:
http://test.sunnysidemarket.ca/right.jpg

Wrong:
http://test.sunnysidemarket.ca/wrong.jpg

So basically I have:

HTML:

<div class="content">
    <div>
        <img src="..." width="276" height="207" />
    </div>
    <div class="body">
          <p>
            ...
            <a class="mediaset" href="...">Link</a>
        </p>
    </div>
</div>

CSS:

.content img {
    float: right;
}

a.mediaset {
    margin: 0 auto;
    width: 220px;
    display: block;
    overflow: auto;
}

Or what you can see in the jsfiddle: http://jsfiddle.net/CVkFw/

The issue is intermittent, sometimes it happens, sometimes it doesn’t. What it appears to me to be is a bug in chrome where the overflow and margin properties are calculated but when the floating content loads, sometimes the browser doesn’t layout the elements again.

There are ways of solving this using jQuery and modifying my HTML but I would really love to solve this with CSS if at all possible.

Answer 1

My best guess is that this erratic behavior is caused by overflow: visible applied in global.styles.css. The problem:

.node-article .field-name-body,
.node-synced-facebook-content .field-name-body {
    overflow: visible;
}

I’m offering this suggestion because when I add this CSS override for overflow: hidden, that component appears to load “more solidly”. The fix:

.node-article .field-name-body,
.node-synced-facebook-content .field-name-body {
    overflow: hidden;
}

The selector itself might need to be adjusted depending on what it is intended to affect. (I’m obviously not that familiar your page’s css code.) Hopefully this points you in the right direction though!