Плавающее изображение с заголовком с фоном

Question

Да!Еще одна проблема с плавающим изображением!Конечно, есть много вопросов по этому поводу, и я читаю такие вещи, как: добавить изображение в свойство background-image.Не могу сделать это время:

jsFiddle здесь

Проблема

У меня есть изображение, всплывшее влево.У меня есть заголовок рядом с ним.Но!При добавлении поля справа на плавающее изображение.Текст действительно отойдет от изображения, но фон все еще продолжается.Я хочу, чтобы фон тоже отделился.В jsFiddle

Итак, я попробовал несколько вещей, таких как: плавающий весь текст, но, конечно, текст динамический, и я не могу определить истинную высоту.

Я попытался добавить текст в свободный div и поместить его рядом с позициями.Не работает, потому что новый div также имеет ширину 100% (по определению H1).

Так чего же я на самом деле хочу? Изображение слева.Текст рядом с ним, с заголовком.Заголовок растягивается между изображением (+ margin-right) и концом div, в котором оно находится.

Для людей, которым лень щелкать по моему jsFiddle :

<div class="main">
    <div><img src="http://www.freakingnews.com/images/app_images/banana.jpg" class="banana"></div>
    <div class="textBox">
        <h1>The title of the banana BLA</h1>
        A lot of text is placed in here, because it is nice to have a lot of text. And more of course.
    </div>
</div>

.banana
{
    width:200px;
    margin-right:2em;
    float:left;
}

.textBox
{
    width:400px;
    background-color:red;
}

.main
{
    background-color:green;
}

h1
{
    font-weight:bold;
    background-color:blue;
}

PS.Я не люблю хаки высоты с JS.Я делаю как хаки с CSS и HTML.

Answer 1

Попробуйте:

.banana {
    width:200px;
    padding-right:2em;
    float:left;
}

.textBox {
    float:left;
    width:200px;
    background-color:red;
}

.main {
    background-color:green;   
}

Необходимо указать ширину обоих элементов div.Если вы этого не сделаете, второй div, который не является плавающим, начнется с верхнего левого угла содержащего div!

Примечание: если ширина 2 div элементов больше, чем контейнер div, вы в конечном итоге один над другим.

Answer 2

Это работает! Я увлекся ... это HTML5.Можете ли вы сказать мне, если это работает на IE7-8?У меня Mac, поэтому у меня нет IE.

Если он не работает, попробуйте добавить в заголовок документа следующую разметку: <meta http-equiv="X-UA-Compatible" content="chrome=1">.

---

HTML

<section id="main">
    <article id="banana">
        <section>
            <img src="http://www.freakingnews.com/images/app_images/banana.jpg"/>
        </section>
        <section>
            <header>
                <h1>Test</h1>
            </header>
            <p>
                Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! Some paragraph! 
            </p>
        </section>
    </article>

</section>

---

CSS

#main {
    position: relative;
    width: 800px;
    min-height: 500px;
    background: black;
    padding: 0;
    left: 50%;
    margin-left: -400px;
}

#main h1 {
    font-size: 200%;
    text-align: left;
}

#banana {
    position: relative;
    width: 100%;
    height: auto;
    margin: 5px;
}

#banana img {
    position: relative;
    width: 400px;
}

#banana section {
    float: left;
    padding: 15px;
    overflow: auto;
}

#banana h1 {
    color: white;
}

#banana p {
    color: gray;
}

---

Answer 3

Я действительно получил то, что вы хотите, если я поместил все в HTML-документ и запустил его вместо использования jsFiddle