CODEWITHSUNDEEP
htmlcss
mightimaus
mightimaus

Reputation: 1089

Float div on right, then drop below on narrow screen

I'm trying to achieve the effect illustrated below:

enter image description here

on my site (http://new.freshsourdoughexpress.com/contact/), but I can't think of the correct HTML and CSS to get it to work. The only way I can get the map to float up on the right is to put the iframe before the text div, but then I can't have the map drop below the text when I shrink the width. I'm out of ideas currently so I'm hoping someone else can point out the obvious. Thanks!

EDIT - Sorry, I posted this as I was running out the door and didn't post enough info. I currently do have a responsive layout (WP Twenty Thirteen theme). If I set the text div to float: left and the map iframe to float: right the text div occupies 100% of the width and the map drops below. I'm trying not to set a width on the text div because I want it to be able to resize with the window. (I'm trying to keep the dimensions of the map the same and have the text resize to fit. Using a percentage width on the text would require me to do the same with the map, which I'm trying not to do.)

If I put the iframe first in my HTML then the map will stay up at the top (the first three frames of the GIF) without setting a width (either in px or %), but then I can't have the map drop below the text. To achieve the last frame I had to move the iframe back below the text.

So I'm wondering if it's at all possible to get what I'm after without defining a width for the text div. If there isn't I suppose I can live with the map resizing. I was trying to do it without it though.

Upvotes: 16

Views: 25020

Answers (5)

Mehmet Eren Yener
Mehmet Eren Yener

Reputation: 2036

JSFIDDLE

for the left block use

float:left;
width:50%;

because it is currently width:100% automatically, you need to separate content as 50% 50%

then for the container block you must clear the float by

 display:inline-block;

Upvotes: 1

misterManSam
misterManSam

Reputation: 24702

Simply float both elements to the left. Control the width of elements with percentage widths: something like width: 50%;

Simple example:

Have a fiddle - Fiddle Link!

Update - Fiddle with text - 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;
}

Upvotes: -1

Ahmedskaya
Ahmedskaya

Reputation: 389

Well, your content area div doesn't have a name so it inherets any near divs style, name it then give it a fixed with and float left then you will find the map floated automaitcally right

Upvotes: -1

Bruno Toffolo
Bruno Toffolo

Reputation: 1554

Please don't ask for the answer, ask how to do it from your current code.

What you're trying to create is a responsive layout. You can achieve what you asked for by using media queries in your CSS. Example of usage:

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

To achieve the desired result there are three different ways to go:

You can choose which way to go. But if you had posted a fiddle or some piece of code, we would be able to help you a little bit better. ;)

Upvotes: -1

Aister
Aister

Reputation: 359

use @media queries, something like this

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

this will set the .rightcol on all devices with screen size 600px or lower float: none and keep it float: right for the rest. You can of course change the 600px to whatever number you please.

Upvotes: 3

Related Questions