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

It is now. (It’s  .)

1 Like

When I have this code in a txt file then renamed to an html file and then dragged to a browser

<!DOCTYPE html>
<html>
<head>
<style>
.fl{width:30%;float:left;}
.fr{float:right}
.wrapper {overflow:hidden}
</style>
</head>
<body>

<div class="wrapper">
<img 

class="fr"src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Be

ach_%28Salines%29.jpg" width="250" height="233">

<ul class="fl">
<li><h1>ab cde ghi</h1></li>
<li><h1>kl mnopqr stuv</h1></li>
<li><h1>xyza bc de fghi kln</h1></li>
</ul><br><br><br><br>

</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><br><br>

</div></div></body></html>
</p>
</body>
</html>

…the first “word” that drops to the next line is “kln” (nextword to drop is stuv). The white space distance from the left side of the image to the word kln (generally before or after it drops down to the next line) is about 4 inches on my screen, making it look like I have huge margins on the float or image or both even though there’s no margins set any where. I would like the words to start flowing (e.g. kln drops down to the next line) when there’s not enough room to fit the right most words and the image due to the browser being too narrow to fit the image and the right most words, not 4 inches beforehand.

Why float the list? Don’t use any more floats than are needed.
As mentioned earlier, making the list display: inline-block will make it clear the floated picture before it starts to wrap.
But I’m still a bit confused about the problem. Maybe rather than describing the problem, describe your desired result, how it should appear on the big screen and how it should be on the small. I’m sure there will be a simple solution.

You set a width of 30% to the ul which means that the text wraps when that width is no longer wide enough to contain the content. It has nothing to do with the float to the side.

Remove the float and width from the ul and just apply a margin-left to the right floated image instead (around 30px or whatever).

Then add a media query at smaller screen sizes to remove the float from the image and centre it instead.

e.g.

<!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:10px auto;
}
}
</style>
</head>
<body>
<div class="wrapper"> <img class="fr"src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="250" height="233">
  <ul>
    <li>
      <h1>ab cde ghi jkl mno pqrst abcde fghu ghgjk </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>

(Note that you should really only use one h1 per page and it is unlikely that an h1 in the middle of a list is very semantic anyway :slight_smile:)

4 Likes

Sam, I tried display: inline-block and it prevents the text from flowing - the text is there in full one second and 1 pixel narrower and it all drops down. I don’t want that, and even if I didn’t mind it has no effect on moving the image to the left when there’s no text on the left.

Paul, Ithere’s still white space left of the image, meaning the image doesn’t really line up with the text.

I think a new approach is to momentarily forget the UL and see if there’s a way to get an image floated right to shift all the way left.

Paul made the image center align within the wrapper when the media query kicks in because one would generally center the image in the viewport of a small mobile device.

To left align the image against the left wall, like the paragraph text, change the margin in the media query to

@media screen and (max-width:460px) {
    .fr {
        float:none;
        display:block;
        margin:0 10px 20px 0;
    }
}

But with max-width:460px what about all the screens that are not 460 px?

Do you mean what about all the screens that are wider than 460px or
do you mean what about all the screens that are narrower than 460px?

Wider

My 4 inch margin problem doesn’t need to be answered because evem if it were solved the image never reaches all the way left.

What 4 inch margin problem??? I don’t think I’ve read about that.

Have you incorporated the change that I posted… and tested it?

I did. It looks as though it will work on all screens, it works on my 17". So what is the purpose of the 460px on the wrapper?

I would think by now the authors of CSS updates have created a show all borders property. Did they?

The 4" white space problem I wrote about in #15. It’s obsolete because the image never shifted left.

The .wrapper does not have a width assigned. The (max-width:460px) in the media query represents the “breakpoint” at which the styles in the media query are invoked… viewport widths of 460px and narrower.

Sorry, I don’t know what you are talking about.

OK. Are you satisfied that the image shifts to the left now?

What distance is 460 pixels?

I would think by now the authors of CSS updates have created a show all borders property. Did they? You know that “box model” and all. What if I want to see all borders of everthibg. Do I really have to find each box ind put in border:1px red, etc for each?

I assume you are asking for the distance in a measuable unit other than pixels… inches or centimenters, maybe. The answer is that it depends on the pixel density of the screen and any scaling factor that the video card or operating system may be applying. In other words, there is no absolute answer.

Yes. Although it is usually better to use outlines than borders because adding a border where there normally is none changes the dimensions of the layout slightly unless box-sizing:border-box is applied.

What is the property? Outline width, style, offset?

What distance is 460 pixels? - From a to b, not units or resolution.

screen and (max-width:460px)

Is that the max width of the UL? I’m not sure that could be because

ab cde ghi jkl mno pqrst abcde fghu ghgjk

fits all on ne line.

Same as border. width, style, color.

The width of the viewport.

outline:50px solid green?

How can I write those CSS people to tell tham to create an outline everything property?

outline:yes.