Поплавьте div справа, затем опустите ниже на узкий экран

Я пытаюсь добиться эффекта, показанного ниже:

на моем сайте (http://new.freshsourdoughexpress.com/contact/), но я не могу придумать правильный HTML и CSS, чтобы заставить его работать. Единственный способ, которым я могу заставить карту плавать справа, - поставить iframe перед текстом div, но тогда я не могу упустить карту ниже текста, когда я уменьшу ширину. В настоящее время у меня нет идей, поэтому я надеюсь, что кто-то еще сможет указать на очевидное. Спасибо!

РЕДАКТИРОВАТЬ - Извините, я опубликовал это, когда я выбежал из двери и не опубликовал достаточно информации. В настоящее время у меня есть отзывчивый макет (тема WP Twenty Thirteen). Если я устанавливаю текст div на float: left, а map iframe на float: right, текст div занимает 100% от ширины, а карта падает ниже. Я пытаюсь не устанавливать ширину в текстовом div, потому что я хочу, чтобы он мог изменять размер с помощью окна. (Я пытаюсь сохранить размеры карты одинаково и изменить размер текста. Использование процентной ширины в тексте потребует от меня сделать то же самое с картой, которую я стараюсь не делать).

Если я поместил iframe сначала в свой HTML, тогда карта будет оставаться наверху (первые три кадра GIF) без установки ширины (либо в px, либо%), но тогда я не могу карта падает ниже текста. Для достижения последнего кадра мне пришлось переместить iframe под текст.

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

Ответ 1

JSFIDDLE

для использования левого блока

float:left;
width:50%;

потому что в настоящее время ширина: 100% автоматически, вам нужно разделить контент как 50% 50%

то для блока контейнера вы должны очистить float

 display:inline-block;

Ответ 2

используйте запросы @media, что-то вроде этого

.rightcol { float: right; }
@media (max-width: 600px) {
   .rightcol { float: none; }
}

это установит .rightcol на всех устройствах с размером экрана 600px или ниже float: none и сохранит его float: right для остальных. Вы можете, конечно, изменить 600 пикселей на любой номер.

Ответ 3

Просто поплавьте оба элемента влево. Управляйте шириной элементов с процентной шириной: что-то вроде width: 50%;

Простой пример:

Есть скрипка - Ссылка на скрипт!

Обновить - Скрипт с текстом - Fiddle Link!

HTML

<div id="text"></div>
<iframe></iframe>

CSS

#text {
    width: 50%;
    height: 200px;
    background: #CCC;
    float: left;
    min-width: 200px;
}
iframe {
    width: 200px;
    height: 200px;
    background: #333;
    border: none;
}

Ответ 4

Пожалуйста, не просите ответа, спросите, как это сделать из вашего текущего кода.

То, что вы пытаетесь создать, - это отзывчивый макет. Вы можете добиться того, чего попросили, используя медиа-запросы в своем CSS. Пример использования:

@media (max-width: 990px) {
    .sidebar {
        float: left;
    }
}

Для достижения желаемого результата есть три разных способа:

Создайте свой макет с нуля
Использовать сетку
Использовать веб-инструмент
- Отзывчивый веб-CSS

Вы можете выбрать, куда идти. Но если вы разместили fiddle или какой-то фрагмент кода, мы сможем помочь вам немного лучше.;)

Ответ 5

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