Float div с фиксированной шириной справа до div неизвестной ширины

Question

Я хочу плавать div с фиксированной шириной справа от div с неизвестной шириной, если осталось достаточно свободного места. Мой код:

#wrapper { 
 
    float: left; 
 
} 
 
#description { 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 
#preview { 
 
    display: inline; 
 
    float: right; 
 
    background-color: black; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    height: 483px; 
 
    width: 239.5px; 
 
}

<div id="wrapper"> 
 
    <div id="description"> 
 
    <div id="paragraph1"> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
     sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
 
     rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
    <br> 
 
    <div id="paragraph2"> 
 
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
     sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea 
 
     rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
    <br> 
 
    <div id="paragraph3"> 
 
     Lorem ipsum 
 
     <ul> 
 
     <li>Lorem ipsum dolor sit amet.</li> 
 
     <li>DLorem ipsum dolor sit amet.</li> 
 
     <li>ILorem ipsum dolor sit amet.</li> 
 
     <li>Lorem ipsum dolor sit amet.</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div id="preview"> 
 
    <img src="screen.png"> 
 
    </div> 
 
</div>

Он хочет ДИВ предварительный просмотр, чтобы всплыть оставил текст описания. Важно, чтобы я использовал div, а не только простой тег img.

Answer 1

Здесь вы идете:

http://jsfiddle.net/austinthedeveloper/w2aom5a5/1/

Проблема в том, что вы плавали другую DIV:

#wrapper { 
    float:left; 
} 
#description { 

} 
#preview { 
    display: inline-block; 
    float: right; 
    background-color: black; 
    background-repeat: no-repeat; 
    background-size:contain; 
    height: 483px; 
    width: 239.5px; 
} 

После удаления поплавка на #description и перемещать контейнер изображения в сверху, он начнет работать. Я также изменил #preview на встроенный блок.

Answer 2

Если вы не можете поставить размер для #description:

Поместите #preview перед тем #description в вас HTML и удалить его float: left.

Answer 3

Для этого можно использовать display: table и display: table-cell. Таким образом, вы не должны изменять порядок дивы:

#wrapper { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
#description { 
 
    display: table-cell; 
 
} 
 
#preview { 
 
    display: table-cell; 
 
    width: 239.5px; 
 
    height: 483px; 
 
    background-color: black; 
 
}

<div id="wrapper"> 
 
    <div id="description"> 
 
    <!-- dummy content --> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
    <div id="preview"> 
 
    <!-- dummy image --> 
 
    </div> 
 
</div>