Divs not floating when content is too large

I'm trying to get two divs side by side. The left one will have an image, and the right one will have some data. I'd like the one on the right to just truncate when there's not enough room. Unfortunately, instead of truncating, the whole div is just dropping down under the one that would otherwise be on the left when there's not enough room. The picture below should make this clear.

Here's my html. I'm throwing overflow:hidden; white-space: nowrap; everywhere, to no avail. When the content in the right div is not too large (or when I resize the popup wide enough) everything floats like I want it.

(this is not MVC, if it was, I'd be using Ravor syntax with gusto)

    <div id="tabInfo" class="tabDiv">
        <ul>
            <li><a href="#tabs-info">Book Info</a></li>
            <li><a href="#tabs-reviews">Reviews</a></li>
            <li><a href="#tabs-subjects">Related Subjects</a></li>
        </ul>
        <div id="tabs-info">
            <div style="float:left;">
                <img src="../books/covers/medium/<%= Book.medImgID %>.jpg" />
            </div>
            <div style="float:left; margin-left:10px; font-size:10pt; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;">
                <div style="font-size:14pt; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;">
                    <b><%= Book.Title %></b>
                </div>
                <div title='<%= PublisherDisplay %>' style='margin-top:5px; font-size:12pt'><%= PublisherDisplay %></div>

                <div style="margin-top:7px;">Author<%= Book.AuthorsArray.Length == 1 ? "" : "s" %></div>
                    <% foreach (string auth in Book.AuthorsArray) { %>
                        <div style="margin-left:10px;"><%= auth %></div>
                    <% } %>

                <div title='<%= Book.Pages ?? 0 %>' Pages' style='margin-top:6px;'><%= Book.Pages ?? 0 %> Pages</div>
                <div style="margin-top:5px; height:16px; margin-top:6px;">
                    <div style="vertical-align: middle; float: left;">Read?&nbsp;&nbsp;</div>
              开发者_运维问答      <img src='../Img/IsRead/<%= Book.IsRead ? "check" : "cross" %>.png' style='width: 16px; height: 16px;' />
                </div>
            </div>
        </div>

It should work if you just set a max-width property on the divs, so they can't exceed a set width.

You'll need to change this to work with your code; this is an example :)

div.left
{
    float: left;
    width: 100px;
}

div.right
{
    margin-left: 110px;
}

div
{
    border: 1px solid red;
}

I would recommend to set fixed width for both left and right columns or the right column will goes down of the left one since it doesn't have enough space in the tab area. Thus, tab content area must be set width value as well.

You dont need to set white-space and text-overflow attributes

http://jsbin.com/uvibiz