CODEWITHSUNDEEP
imagecss-floatresponsive-design
Ajii Noguerra
Ajii Noguerra

Reputation: 69

How to make a floated image act responsively?

Please see this fiddle

My main concern in this fiddle is the div#text and img.frame. I'm trying to create a responsive website, but this has been my problem for so long, I can't figure out how 'to make the img behave beside the text and be responsive at the same time when I try to reduce the size of the browser window. What it does is, it goes under the text before it acts responsively. Is there a workaround for this?

<div id="text">This is some text this is some text this is some text</div>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />

Upvotes: 1

Views: 11032

Answers (5)

Zac Littleberry
Zac Littleberry

Reputation: 56

The key to responsive images with flowed text does rely on float. However, the key is in floating the img element, not the text.

First, place the img tag before the text, giving a markup as so:

<img src="image.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>

The importance of this order is that the img will be floated to the right, removing its cleared blocked region height, and the text will flow up and around it.

Next, remove the float from the text, allowing it to flow, and apply a float right to the image. I will also note, that to give a margin between the text and the img, the margin is applied to the img, giving you this styling:

img { max-width: 100%; height: auto; }

#text{ width:100px;}

.frame {
    float:right;
    background: #fff;
    padding: 6px;
    margin-left:10px;
    box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
}

Here is a jfiddle demonstration

Upvotes: 1

Lucky
Lucky

Reputation: 335

For your goal you should use em or % and use inline-block.
jsfiddle.net/geNuR/ Look at this jsfiddle Don't know why i can't put code propely, maybe forum blocked our country))

​

Upvotes: 1

vortextangent
vortextangent

Reputation: 571

You could start by adding the css max-width: 60%; in .frame. It's not perfect but is this similar to what you are trying to achieve? Better results can be realized with javascript/jQuery.

Upvotes: 0

Nour Berro
Nour Berro

Reputation: 560

As I understand you need an image beside a text, so when you reduce the window size the image and text behavior isn't affected.

You need the following:

  1. Make a container div id=img_container give style width (let's say 400px)
  2. Put your image inside the container and give a style #img_container img{float: left}
  3. Put your text inside a p tag and give style #img_container (p or div) and give style (margin-left: same of your img width) + 10

This is the full example:

<style>
    #img_container {
        width: 400px;
    }
      #img_container.text {
          margin-left: 306px; 
      }
       #img_container img.frame {
           float: left;
       }
</style>
<div id="img_container">

<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>
</div>

Upvotes: 0

Rikki_Sixx
Rikki_Sixx

Reputation: 1

I'm assuming that you're looking to have text and an image side-by-side here, so apologies if I'm wrong.

Like M. Berro, I would first put the two elements inside a containing div, as below:

<div id="container">
    <p class="text">Here's some text. This will be aligned to the left, and next to the image. It's width will change as the viewport expands or contracts.</p>
    <img src="/image.png" title="An image, aligned right" />
</div>

To sit the image and text side-by side, I would use the following CSS as a starting point:

#container {}
#container p.text { float: left; min-width: 320px; }
#container img { float: right; margin-left: 20px; }

In my example, I've applied a float to each of the two elements (You will of course have to clear the floats to make sure the rest of the page's structure remains intact - I suggest looking at Clearfix, as it avoids any extra empty divs). I've also given the text a min-width: this ensures that the text doesn't contract to a point where it is unreadable!

Upvotes: 0

Related Questions