Widen your browser as far as it will go and you’ll see that the text easily flows down the left side of the image and then straight down to below the level of the bottom of the imasge. Once the text is below the image there’s a fairly wide white space left of the image where the text was.Just as the text drops down to below the level of the image I would like the image to shift to the left directly above the text, which solves the white space problem. CSS adjustments I’ve tried either move the image left but prevent the flowing of the text (all of the text jumps down at one time as if the text is an image instead of showing the narrowing justified left and right behavior) or just don’t work at all.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.fl{width:30%;float:left}
.fr{float:right}
</style>
</head>
<body>
<div itemscope itemtype="http://schema.org/Product">
<img class="fr" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Martinique_Beach_%28Salines%29.jpg" width="500" height="334">
<ul class="fl">
<li><h1>Xy 1234 56</h1></li>
<li><h1>Ab 123456 12 34</h1></li>
<li><h1>12345 123 1234 12 345</h1></li>
<li><h1>123456 123 12345 6789</h1></li>
</ul>
<br><br>
<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>
As you widen the browser you can see the text coming up between the UL on the left and the inage on the right.
As you narrow the browser, the text will first move below the UL and image (where it should be) and as you continue to narrow the browser the text will actually appear before the UL and start pushing the UL down, which makes the web page look possessed.
How do I block/wall off the UL and image to stop the text from coming up through the UL and image? I tried putting a div and /div above and below the UL and image but it had no effect.Thanks - Chris
That worked great, Ronpat. !! It also seems to also demonstrate how ULs display differently depending on surrounding code. Before the UL “sentences” would break up and take up two lines causing a flowing effect and eventually all of the text would drop down. But now with the wrapper the sentences don’t break up (while on the same level as the image) and instead all of the text drops down as one with no flowing before hand. Any idea why this happens?
I guess that’s not right - I took the s out and it flows fine. Some will have to be put back in so the whole text drops at a certain point. But the text strats flowing as narrow the screen but awfully early - when there’s an enorrmous amont of space between the image and text. Why is that? I tried using marins and it made it worse.
I’m sorry, but I do not understand what you are describing. Perhaps you can upload another block of code that demonstrates whatever is happening now.
BTW, I suspect that there is a “tag” in your post #12 after the words "I took the ". You’ll notice that it is not visible. If you will edit that post and put one backtick before the first character and one backtick after the last character the “tag” will be visible.
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 )
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.
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;
}
}
