Div не плавает, когда содержание слишком велико

Question

Я пытаюсь получить два div рядом.Левый будет иметь изображение, а правый будет иметь некоторые данные.Я бы хотел, чтобы тот справа просто обрезался, когда не хватает места.К сожалению, вместо усечения весь div просто опускается под тот, который в противном случае был бы слева, если недостаточно места.Картинка ниже должна прояснить это.

Вот мой HTML.Я бросаю overflow:hidden; white-space: nowrap; везде, но безрезультатно.Когда содержимое в правом div не слишком большое (или когда я изменяю размер всплывающего окна достаточно широко), все всплывает так, как я хочу.

(это не MVC, если бы это было так, я быиспользовать синтаксис Ravor с удовольствием)

    <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>

Answer 1

Это должно работать, если вы просто установите свойство max-width для элементов div, чтобы они не могли превышать заданную ширину.

---

Вам нужно будет изменитьэто для работы с вашим кодом;это пример:)

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

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

div
{
    border: 1px solid red;
}

Answer 2

Я бы порекомендовал установить фиксированную ширину как для левого, так и для правого столбца, иначе правый столбец опустится ниже левого, поскольку в области вкладок недостаточно места.Таким образом, в области содержимого вкладки также должно быть установлено значение ширины.

Вам не нужно устанавливать атрибуты пробела и переполнения текста

http://jsbin.com/uvibiz