Placing An Image Next To A Block (UL) Without Changing Block Behavior

So the 250px image I was using as an example worked well for most if not all small screens. Still I have a 500px image and the code that Paul and Ron wrote won’t work on a more normal size of 500px image.

<!DOCTYPE html>
<html>
<head>
<style>
.fr {
    float:right;
    margin:0 0 20px 10px;
}
.wrapper {
    overflow:hidden
}
@media screen and (max-width:460px) {
    .fr {
        float:none;
        display:block;
        margin:0 10px 10px 26px;
    }
}
* {outline: 1px solid #f00}
</style>
</head>
<body>
<div class="wrapper"> <img class="fr" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="500" height="334">
  <ul>
    <li>
      <h1>abbbbbccc cde ghi jkl mno </h1>
    </li>
    <li>
      <h1>kl mnopqr stuv</h1>
    </li>
    <li>
      <h1>xyza bc de fghi kln</h1>
    </li>
  </ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy   nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi  enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis   nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure  dolor.</p>
</body>
</html>

When the space for the text (the UL ) is too small for the first word abbbbbccc to fit it forces all the text to jump down below the level of the bottom of the image - at which point the image should jump left to fill the white space where the text was but now doesn’t move at all, but an increase in image size for some reason stops the image from shifting left.

The picture shifts to the left at the width specified in the media query. I you want that to happen at a different with, change the value in the media query.

That’s because the bigger image pushes the text below sooner, before the media query kicks in and moves the picture.

“width specified in the media query.” The width of what?

As was said before…

This is a media query:-

@media screen and (max-width:460px) {
}

The first bit @media says we are asking about media.
screen says the type of media we are asking about is the screen.
(max-width:460px) specifies that we are asking about a screen that is no larger than 460px in width.
And therefore the css that appears within the following brackets { } will apply only to screens that are no larger than 460.

tl;dr
The Screen!

I see how I caused some trouble when I arbitrarily wrote in a 250px width dimension. And then I wrote viewport when I meant media query.

I have no interest in programmg for samll screens because the so many of my images are larger than small screens and so all those small screens will always have nothing but image (reduced in size image at that) at the top of the screen with no words on the left at all.

So for my larger images on larger screens, I still need the same thing, the text to flow down the left side of the image to below the image and the image to jump left into the white space where the text was. Is it possible?

Thanks,

Chris

so what are you expecting the huge (and growing) number of people with small screens to do? Is everyone supposed to just ignore your site - if so then why bother with it in the first place.

4 Likes

Did you even look at my Codepen in post 51?
That works down to a screen width of about 220px, when the longest word in your list runs out of space.

1 Like

Hi,

You seem to be making this sound more complicated than it is:)

Take a look at this live simple example of a floated image and resize the browser window (or test on any device) and then explain what it is that you need to be different?

http://www.pmob.co.uk/temp2/float-wrap.html

The image is floated to the side and assuming the image is a 500px image then your media query will need to be anything slightly larger than that 500px so that you can then apply a different styling and remove the float.

I made the media query at 660px which means that you don’t get ‘orphaned’ bits of text at the left side of the image when the text is squashed and some words fit and some don’t. It means the image will not be floated when there is only 160px space left for text to fit alongside the image (approx). That 660px can be anything you like that is greater than the 500px image but obviously you don’t want it to be too large or then the text won’t wrap on intermediate screens.

There is no natural way to float an image to the right and then suddenly align left when there is no text next to it. If you think logically about this action then it could never be a default option as it would break the idea of floating in the first place.

If you didn’t want wrapping text (as in my example) but text that just stayed to the left of the image you could create the effect with flexbox but that is a completely different construct to a simple floated image.

2 Likes

That web page looks great for my need.

It looks like the width dimension in a media query is the width of something like a viewfinder" - how many pixels in width are you giving the visitor device to re fit your web page. The shifting left of a floated right image is the device refitting the page a second time which occurs when the browser width is close to the width given in the media query. That’s just a guess.

In any event, that code should be enough for my need, let me see.

Thanks Paul

You can use view page source for that’

@media screen and (max-width:660px){
	img.fr{
		float:none;
		margin:0 0 15px;
	}	
}

The media query overwrites the previous float: right when the screen is less than 660px.

1 Like

Works like a charm, unfortunately all that effort was (temporarily) for naught. Of cource the space would be created on the right side of the image. But some image stretch code worked fine.

@media screen and (max-width:680px) {.fr{float:none;display:block;max-width:100%;width:100%}}

I see now the max-width in a media query is the distance from 0px starting at the left side of the browser 680 px moving toward the right side of the browser. When the browser is narrowed to 680px or narrower, then the rules in the media query (float:none;display:block;max-width:100%;width:100%) activate.

The outline everything css is really helpful. I’m really glad I asked.

Thanks again

Not sure I understand what you mean?

You should never stretch an image without maintaining aspect ratio.

If you look at my example the image is set to a max-width of 100% but the important part is the height is set to auto. It is this auto setting of the image that will ensure the aspect ratio is always maintained in relation to the images width.

You only need the width:100% as the max-width:100% is redundant in that rule but you would have needed neither if you refer to my example as the img was already max-width:100% and thus catered for naturally.

Yes, its simply the browser width and nothing to do with anything else on the page.:slight_smile:

1 Like

Let me rewite that one sentence of mine, … the max-width in a media query is the distance from the left side of the browser (which is 0px) moving, for example, 680 px toward the right side of the browser, regarless of wither the browseer is a phone/mobile or an actual browser on a desktop/laptop) When the browser is narrowed to narrower than the max-width in the media query (or the phone/mobile width is narrower than the max-width in the media query, then the rules in the media query (float:none;etc, etc,) activate and override the CSS used when the screen is not narrower than the max-width.

In @media screen and (max-width:680px) {.fr{float:none;display:block;max-width:100%;width:100%}}
I took width:100% out and there was no stretch, then I put it back in and took max-width:100% and it did work, so I kept max-width:100% ouit. Thanks

But I didn’t see that your Float Wrap page stretched the image to fill white space left or right of the image, it shifts to fill white space on the left, only to leave white space on the right, the problem I ran into that seems to be fixed by stretching the image. But I found the height:auto code in there and tried it and it does a great job squaring stretched images, maybe too good, it kinda blasts out.
Thanks Paul !

.

Yes, that is how a max-width media query works.

Usually stretching an image beyond its native size is considered bad, because it may appear blurred or distorted.
The max-width: 100% stops it getting any bigger than it should be.

What I normally do when cancelling the floated images on a smaller screen is to centre the image, giving equal whitespace on either side.

2 Likes

I agree and is actually what I showed and suggested in my very first reply to this:) (post #17)

The OP didn’t like it :frowning:

However that is the approach I always take and the one that most people follow because you don’t really want to stretch the image to the viewport width if that width is larger than the native size of the image so instead just center it. It looks much better that way anyway.

You can delay the media query in removing the float fro the image until the viewport width matches the image width but then for a short while you end up with text squashed to the side and may be only one or two words wide.

A compromise has to be made somewhere.:slight_smile:

4 Likes

Centering is good. I just didn’t think of that idea at the time. The stretching w/o auto height gives images a big movie theatre screen look on the small screens of hand held - it’s kind of a paradox .

Anyway, the white space chase is still on - the white space is now right of the dropped down ul text. I thought of keeping the ul text at its minumum width when it drops down and I actually succeeded in doing that but I just can’t get the paragraph text below the ul to float right of the ul. It appears that if B is to the right of A then in html/css code B has to be above A; I just can’t figure out how to pull the paragraph below the UL text up to and to the right of the UL text.

<!DOCTYPE html>
<html>
<head>
<style>
.fr {
    float:right;
    margin:0 0 20px 10px;
}
.wrapper {
    overflow:hidden
}
@media screen and (max-width:460px) {
    .fr {float:none;
        display:block;
        width:100%;
        height:auto;
        margin:0 10px 10px 26px} 
     ul {width:112px}
     p{float:right}   }

* {outline:1px solid #f00}
</style>
</head>

<body>

<img class="fr" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="250" height="280">

  <ul>
    <li>
      <h1>aaa bbb ccc a c</h1>
    </li>
    <li>
      <h1>aaa bbb ccc v</h1>
    </li>
    <li>
      <h1>xyza bc de fghi kln</h1>
    </li>
  </ul>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy   nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi  enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis   nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>

</body>
</html>

Thanks, Chris77

Try this, please. Copy this code in its entirety to a file and give the file an .html suffix. Open it in your browser.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>white space</title>
    <style>
.imgbox {
    float:right;
    max-width:320px;  /* width of the image while floating */
}
.imgbox img {
    width:100%;
    height:auto;
}
@media screen and (max-width:480px) {
    .imgbox {
        float:none;
        max-width:400px;  /* max-width of image after media query becomes active. */
        margin:0 auto;
     } 
     ul {width:112px}
     p {float:right;}   
}

* {outline:1px solid #f00}
    </style>
</head>
<body>

<div class="imgbox">
    <img src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" alt="" width="2304" height="1728">
</div>
<ul>
    <li>
        <h1>aaa bbb ccc a c</h1>
    </li>
    <li>
        <h1>aaa bbb ccc v</h1>
    </li>
    <li>
        <h1>xyza bc de fghi kln</h1>
    </li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy   nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi  enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis   nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>

</body>
</html>

You should include the actual dimensions of the image in the img width and height attributes. They provides the reference aspect ratio.

You’d need to float the ul because floats must come first in the html when you want items to wrap around them.

You would then remove the float:right from your paragraph because fluid text on a widthless float will be 100% eventually and will thus never sit next to anything.

Like this?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>white space</title>
    <style>
.imgbox {
    float:right;
    max-width:320px;  /* width of the image while floating */
}
.imgbox img {
    width:100%;
    height:auto;
}
@media screen and (max-width:480px) {
   .imgbox {
       float:none;
       max-width:400px;  /* max-width of image after media query becomes active. */
       margin:0 auto;
    }
    ul {
        width:40%;
        float:left;
    }
}

* {outline:1px solid #f00}
    </style>
</head>
<body>

<div class="imgbox">
    <img src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" alt="" width="2304" height="1728">
</div>
<ul>
    <li>
        <h1>aaa bbb ccc a c</h1>
    </li>
    <li>
        <h1>aaa bbb ccc v</h1>
    </li>
    <li>
        <h1>xyza bc de fghi kln</h1>
    </li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy   nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi  enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis   nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</p>

</body>
</html>

(PS: In my previous post in the media query, the paragraph should not have been floating.)