Responsive Layout with Image Problem

1

I’m unable to get the text in the second column to flow around the image inserted mid paragrgh. Also after the image the text takes on the width set for the image even though the image is contained ithin its own div.

I have column1 one floating left. Column2 floating right. I am tring to insert an image within column two and get the image to float right an the text to flow around it.

I am stuck now…anyone have a solution or better (or correct!!!) method of nesting please??

Here is the file…
Codepen Test Layout File

Thanks in advance

2

Hey,

First thing is it looks like you didn’t close the image tag before the closing div tag.

From there does this get you what you wanted?

#chakra {
  display: inline-block;
  text-align: center;
  width: 100%;
}
img {
    max-width: 100px;
}
3

Hi,

thanks for the reply and code.
The text has returned to standard width - due to the “display: inline-block” - thanks.
The issue still remains that the text does not wrap around the image.
Using dev tools I can see that the chakra div takes up the width of the container. Even when I set the div width to 40% it still seems to take up rest of the row. And so no text flowing around it. Im not sur how to stop the chakra div from tking up the width of its parent container (.col-2)?
:slight_smile:

4

For some unkown reason there was a right border on the chakra div the width of the col-2 container.
I’ve removed that now but the text still doesn’t wrap.
any ideas?
:sunny:

5

Try moving the image to the top of col-2, then this:

#chakra {
  padding-left: 50px;
}
img {
  float: right;
  width: 100px;
  margin: 15px;
}

Closer?

6

It definitely works but…I will not want every image added after this to float to the right. So I was tring to get the chakra image to float right individually without making a universal declaration. Does that make sense?
This might make a good FCC challenge!!!

7

something like this?
http://codepen.io/erretres/debug/akLNWm

8

Getting there!
I want to float the image to the right.
I have just managed to get it to work ‘if’ I remove the chakra div from within the paragraph and place it just before. This looks like I wanted but what if i wanted the image to appear mid paragraph? A new para and place image inbetween?
Codepen link updated to reflect above :slight_smile:
BUT image moves outside of it’s parent when making browser window small!!! :frowning:

9

You can be specific about which image you want it applied to, i.e.:

#chakra img {
  float: right;
  width: 100px;
  margin: 15px;
}
10

ahh right…that might be it then! Well done :slight_smile:

11

YES - You have Solved it - Thanks for your input. It was driving me nuts!!!
Looks like thats the way to do it for all images added.

I dont see why I cant float within an already floated container but looks like thats just how it is!!!
Thanks again to you and erretres. :slight_smile:

1 Like
12

Instead of creating a bunch of IDs or definitions on a case-by-case basis, why not create a “general” rule? Remember, you can add more than one class to an element to style it. Maybe do something like this:

.float-right{
    float: right;
}
.float-left{
    float: left;
}
.img-small{
    width: 100px;
    margin: 15px;
}

Then you could use it like this:

<img class='img-small float-right' src='...' />
13

thats a good idea…thanks.
The less typing the better!!!