Text won't wrap around floated block

Question

Here is my jsfiddle:

http://jsfiddle.net/4g4Jy/

My HTML:

<p>With approximately 100 sessions available, attendees will have the opportunity to build their knowledge on a variety of industry-specific topics.
    <a href="#" class="btn btn-right-align">Right-aligned<br />Button here</a>
</p>

My CSS:

a {
    color: #2d6798;
    text-decoration: none;
}

input[type=submit], button, .btn {
    font-size: 18px;
    display: inline-block;
    background: #d13802;
    padding: 10px 19px;
    color: #fff;
    margin: auto;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Open Sans Condensed',sans-serif;
    font-weight: 100;
    line-height: 18px;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 25px;
    max-width: 160px;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-right-align {
    width: 160px;
    float: right;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

I don't know if I'm just having a blonde moment, but I've been trying to get this thing to work for a while now. Whenever I float images to allow the text to wrap around it, I never have this problem, but it I tried inline-block, block, etc.. I can't get anything to work. I need this button to be 200px, but still have the same padding as the other buttons on the page hence all the css declarations. They are there for the other regular buttons and such.

Thanks for any help!

Answer 1

Have the link come before the text:

<p><a href="#" class="btn btn-right-align">Right-aligned<br />Button here</a>With approximately 100 sessions available, attendees will have the opportunity to build their knowledge on a variety of industry-specific topics.</p>

jsFiddle example

Answer 2

Is this what you want?

http://jsfiddle.net/4g4Jy/4/

I just moved the button above the text

<p><a href="#" class="btn btn-right-align">Right-aligned<br />Button here</a>With approximately 100 sessions available, attendees will have the opportunity to build their knowledge on a variety of industry-specific topics.
With approximately 100 sessions available, attendees will have the opportunity to build their knowledge on a variety of industry-specific topics.
With approximately 100 sessions available, attendees will have the opportunity to build their knowledge on a variety of industry-specific topics.

</p> 

Answer 3

Try with a at the beginning of p:

http://jsfiddle.net/grrenier/3PWzU/

<p><a href="#" class="btn btn-right-align">Right-aligned<br />Button here</a>With approximately 100 sessions available, attendees will have the opportunity to build their knowledge on a variety of industry-specific topics.</p>

Answer 4

with the code you provide I have no problems, the text goes around the box!

box with all the text aroung

you can even try by putting the box before or after the p tag