• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How Do I Wrap Text Around and Below an Image?

Explorer ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

I am trying to wrap text around an image so that it wraps next to the image and below the image. This is especially desired for responsiveness \ resizing pages. Here is how one of the standard temaplates appears on a wide screen:

Galeodan_8-1618698575848.png

When the page shrinks, it changes to this:

Galeodan_9-1618698601950.png

But, as the screen shrinks, I want the text to wrap beside AND across, under the image:

 

Galeodan_7-1618698525148.png

I cannot find an example of this behavious in any of the templates. Surely it can be done?

Any help appreciated.

Sean

Views

3.8K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Apr 25, 2021 Apr 25, 2021

yes... you're so right... I always loved this one https://www.youtube.com/watch?v=Q5KKVC3JyJA... well, not in the same way than the previous link about a moment of pure emotion

Votes

Translate

Translate
Community Expert ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

Which is more important to site users? 

Responsive:  being able to see appropriately scaled image and text on ANY sized device? 

Non-Responsive: text that wraps around a static sized image with old fashioned floats? 

 

image.png

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body style="padding-top: 70px">

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<header class="container-fluid bg-info text-light">
<div class="row">
<div class="col">
<h1>Bootstrap 4.5 in Dreamweaver</h1>
</div>
</div>
</header>

<main class="container my-3">
<div class="row">
<div class="col-md-12">

<h2 class="text-info">1 Column, Floated image</h2>
<p><img class="float-right" src="https://dummyimage.com/500x350" alt="placeholder">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta reprehenderit eaque incidunt dolorum quo ea expedita quibusdam obcaecati repellat atque deleniti molestias, quas aperiam accusamus, esse quos deserunt natus! Recusandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta reprehenderit eaque incidunt dolorum quo ea expedita quibusdam obcaecati repellat atque deleniti molestias, quas aperiam accusamus, esse quos deserunt natus! Recusandae.</p>
</div>
</div>

<hr>
<div class="row">
<div class="col-md-6">
<h2 class="text-info">Responsive, 2 Columns</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum tenetur ipsa tempore sed, a cupiditate mollitia aliquid delectus corporis accusamus pariatur atque voluptates deserunt debitis, odit omnis suscipit dolore natus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum tenetur ipsa tempore sed, a cupiditate mollitia aliquid delectus corporis accusamus pariatur atque voluptates deserunt debitis, odit omnis suscipit dolore natus.</p>
</div>

<div class="col-md-6">
<img class="img-fluid" src="https://dummyimage.com/500x350" alt="placeholder">
</div>
</div>
</main>

<footer class="container-fluid text-center bg-info text-light p-4">
<p>Some footer text here...</p>
</footer>

<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

 

Hope that helps. 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

I don't really know what's more important to users. But what I want to achieve is text that "responds" by wrapping under as well as beside an image as the screen size changes - As in the sequence of images in my post. I thought I was describing "responsive" behaviour but maybe not - I'm new to this stuff.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

Did you post a second response? I did not see the code section until after I posted my own response.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

Just tried the Bootstrap example you sent - That is exactly what I was looking for, thanks.

I was rather hoping that it was something I could do without the help of Bootstrap - It's a control thing I have. 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

You do not need Bootstrap.  Feel free to code manually if you're up for it. 

https://www.w3schools.com/cssref/pr_class_float.asp

 

I put up the Bootstrap examples because I can't see any reason not to use Bootstrap.  It saves a huge amount of time which I'd rather be using for more important coding tasks. 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

Lately I have been producing sites based on Bootstrp 5. It reenforces what Nancy says, `it saves an enormous amount of time`.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

Experimented with the "clearfix hack". It did the wrapping OK but it was allowing elements to intrude on white space before the text started to wrap (hard to describe!). I'm sure there's an easy fix for that. So I figured I would ask the pro's the best way to do it and it sounds like "Bootstrap" is the way to go. I'll check it out. I'm kinda averse to using whole templates but if I can use elements of Bootstrap to do stuff like the example above, that would be OK. I would have to download it so I can work offline - Internet here is slow and unreliable.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

I appreciate that each individual has their own workflow and that is to be respected. I am only conveying my own experience after more than 20 years of web development.

 

Although Bootstrp claims to be a framework, I view it more as a library of ready made code. It is possible to use parts of Bootstrap by applying the source code thus keeping the library as small as possible. With Bootstrap 5, by getting rid of jQuery, I feel that using the full library has become a great option. Although not completely up there by not having fully utilised CSS Grid, it is still a great time saver. There is also a geat community out there that supports bootstrap. Just search for Bootstrap, in particular Bootstrap 5, in YouTube and you'll be up and running in no time. One search gave me https://www.youtube.com/watch?v=bzZyCB5QT9I&list=PLp50dWW_m40UvCxL8K83_DotLYiG4mDcM

 

Have fun.

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

Thanks - Will be checking that out. One thing: until you mentioned it, I was not aware there even was a BS5 yet. If I start using 5, could support for older browsers be an issue? Or is it their fault for using IE? 🙂

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 17, 2021 Apr 17, 2021

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

quote

See https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-interne...


By @BenPleysier

Thanks Ben - Would have to say: about time. But what happens when a user on IE11 opens a BS5 page? Do they get a popup, or something, recommending they get a new browser - Or does it just act weird?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

quote

So I figured I would ask the pro's the best way to do it and it sounds like "Bootstrap" is the way to go.


Bootstrap isnt the way to go, it just bloats the code and imports redundant js and redundant css into a website which doesnt need it, unless you throw it a bespoke version of Bootstrap and l dont know many if any developer that can be bothered to go through that process.

 

Using the default version of Bootstrap is a bit like filling up a spare room full of rubbish you cant be bothered to throw away but will never use. Its bad management that will eventually catch up with you.

 

You should avoid all frameworks if you are are serious web developer, anyone else is free to use what they want.

 

What you're asking for is as simple as below (no framework required, its basic, basic css).

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wrap Text Around Image</title>
<style>
.imgWrap {
width: 80%;
margin: 0 auto;
}
.imgWrap img {
float: right;
margin: 0 0 0 30px;
}
@media screen and (max-width: 768px) {
.imgWrap {
width: 90%;
}
}
@media screen and (max-width: 768px) {
.imgWrap img {
float: none;
margin: 0;
max-width: 100%;
}
}
</style>
</head>
<body>

<section class="imgWrap">
<img src="images/apples.jpg" alt="">

<h3>CONTENT HEADING</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
</section>

</body>
</html>

 

 

Having said that I think maybe the default templates might not cover what you required as wrapping text around images seems a bit dated these days, I think. Thats not to say you might not need to do it in a limted capacity and knowing how can be useful.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

Hi osgood_,

 

Great to hear your `bloating` remarks. While the rest of the world gets on developing websites using Bootstrap, I believe that you have retired in disgust. It is a nice concise exmple that you have shown, nothing but praise. If the world of web development was that easy, merely coding for one image.

 

What if you want to include a modal? One that has a form with floating labels for the form fields and a switch that replaces the boring check box.

 

BenPleysier_0-1618743202918.png

 

 

What if you want to include an accordion, or a navigation-bar that collapses for smaller screen sizes? What if you wanted to create a card that displays important information?

 

BenPleysier_1-1618743433328.png

I could go on and on. All of the above is possible simply by adding a class to the element.

 

Rather than `a room full of junk`, regard Bootstrap as a Swiss army knife.

 

BenPleysier_2-1618744002340.jpeg

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

The rest of the world? Better devs are moving away from Bootstrap because its behind the curve and contains nothing original. Why limit yourself to the basic modal, accordion, slideshow etc that is included in Bootstrap - its a very blinkered approach which confines you to a small unimaginative box or paying $1000 dollars a year for a bit of software that can give you more options wink, wink. Now if that chappie could code the world is his oyster and would not have to spend all his bonus on software.

 

Dont overlook Bootstrap was originally intended for back end development where an imaginative and visual approach is less important, perfomance is less of a concern, so use if for what it was intended to be used for if you insist on using it.

 

Yes, l have largely retired now, following in your footsteps, doing this for fun, rather than as a means of financial return. Calling out the bullshite approaches has always been important to me as there are too many pretenders in this business now for my liking.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

Osgood: "Having said that I think maybe the default templates might not cover what you required as wrapping text around images seems a bit dated these days, I think. Thats not to say you might not need to do it in a limted capacity and knowing how can be useful."

 

I do believe there is a still a place for using old fashioned text around images. Particularly in the context of conveying knowledge rather than selling product or services. I only develope sites for my own businesses (in travel & tourism) and while the sites could certainly use more pizzaz at the front end, they also convey information that is either of interest, or important, to clients and potential clients. So while, I looking forward to playing with the front-ends, I also want to continue providing pages of information, with photos and maps, that our guests do appreciate for their clarity and ease of reading. That is the context in which I seek to master the relevant techniques. Maybe I will end up with a mix of Bootstrap and 100% self-coded pages - If that's feasible (and so far I don't see why not). 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

Either use a framework throughout your project or don't.  I'm no fan of so-called hybrid sites that don't make any sense to anyone except the person who cobbled it together in the first place.  When the time comes for someone else to take the project, they won't understand what you've done if you're not consistent about it.  

 

Bootstrap 4 vs 5:

  • Bootstrap 4 is not compatible with Bootstrap 5 so choose one or the other.
  • Bootstrap 4 is already integrated into Dreamweaver so there is nothing to download. 
  • Bootstrap 5 is new and not included in DW yet.  If you decide to use 5, you do it solo without much help from DW.

 

Internet Explorer:

Few people still use IE anymore. I quit doing backflips for people on inferior browsers because it's not my problem.  If they can't use Edge, they can use Chrome or Firefox.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

I do believe there is a still a place for using old fashioned text around images. Particularly in the context of conveying knowledge rather than selling product or services.

 

It's just a personal observation that I haven't recently noticed a lot of text running around images on more modern websites, that maybe down to a couple of things:

 

1) It's not long before you need to shunt everything into 1 column due to responsive compatibility so runaround doesnt add much before it quickly becomes obsolete as columns narrow on various devices.

 

2) The only way runaround text/images can be achieved is to use css float. A lot of newer developers think this is unfashionable to use as float was a hack to put columns side by side before flex and grid arrived. However its not a hack, float was originally intended to float images not float columns side by side but newer developers are a bit lacking in background history.

 

I tend to use float if the image is small in width, say an icon or vertical logo where there is more scope for the columns to reduce further before you have to change the layout to 1 column to accomodate wider images.

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

Text wrapping around an image is common on printed pages where everything is static and unchanging.  But floats are messy, especially when used with flexbox.  They fall apart in responsive layouts.  You've got to remember to clear them. And there's no room for floats on small devices.  So too much pain for too little gain. 

 

The path of least resistance is a 2 column layout that breaks to vertically stacked single columns on small devices. So that's what modern developers use.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

Thank you Osgood for your additional comments. And for the example code which I have just begun to appreciate (it didn't seem to work at first because my browser was zoomed out (silly mistake and watching for that now). I think I will be bothering you for some further suggestions on the coding - Such as setting image sizes and preventing the next section from encroaching into the first.

 

Regarding the 2-column approach suggested by Nancy: the informative pages of my sites tend to mix photos and graphics with maps, which have to be big enough to read. So image sizes vary considerably and I suspect many pages are not a natural fit for a 2 column layout. Besides, many of the 2 column examples I see result in excessive white space as the screen shrinks and the text extends way below the image instead of wrapping across and below.I guess its a matter of taste.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

quote

...the informative pages of my sites tend to mix photos and graphics with maps, which have to be big enough to read.

============

That's nothing new or extraordinary, though.  Look at what online magazines, news agencies and e-book publishers do.  Then ask yourself why the pros don't use floats.   Perhaps you would get what you want with bigger images and smaller text columns like this:

 

image.png

<main class="container">

<div class="row">
<div class="col-lg-4">
<h2 class="text-info">Responsive, 2 Columns</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum tenetur ipsa tempore sed, a cupiditate mollitia aliquid delectus corporis accusamus pariatur atque voluptates deserunt debitis, odit omnis suscipit dolore natus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum tenetur ipsa tempore sed, a cupiditate mollitia aliquid delectus corporis accusamus pariatur atque voluptates deserunt debitis, odit omnis suscipit dolore natus.</p>
</div>

<div class="col-lg-8">
<img class="img-fluid" src="https://dummyimage.com/900x550" alt="placeholder">
</div>
</div>
</main>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

quote

I think I will be bothering you for some further suggestions on the coding - Such as setting image sizes and preventing the next section from encroaching into the first.

 

No problem, once you have an example post to the forum, I'm sure one of us can help you out.

 

In terms of the image size you'll probably need an image of at least 768px wide so it can consume the browser from edge to edge in tablet devices and smartphone devices once you go to a one column layout, whilst for the desktop layout you can set it at a specific width like 50% of the parent container so its still responsive as you narrow the browser window or you could set it at a specific px width if you require the image to maintain a specific width on desktop.

 

You could use srcset to serve different sized images for different width devices BUT I think that subject is for another day.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 18, 2021 Apr 18, 2021

Copy link to clipboard

Copied

Thanks for the offer Osgood. The code is below, for everyone's amusement:) I have also uploaded a grey box The page is based on your suggestion given above. Changes I have made include:

> Gather styles into "all screens" and "small screens" sections. There will be more styles to add and move all to seperate css style. 

> Set explicit image sizes in the <body> - I have provided 2 grey boxes, 1600x900 ("Photo_1600"). Normally I would have this in an "images" subdirectory but I have coded them as local for convenience.

> Added a second section, separated from the first with a <p> that does nothing more than demarcate: <p style="clear:both; margin-top: 0; margin-bottom: 0;"></p>. No doubt there is a better way to do this. 

It works pretty well. There is an awkward phase before switching to the "small-screen" styles where the wrapping doesn't work too well. I would try to avoid that happening close to the popular phone or tablet resolutions.

________________________________________________________________

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Wrap SK2</title>
<style>
/*############################################# ALL SCREENS */
/* NB: Margins: T-R-B-L, T-RL-B, TB-RL, TRBL */
p {
font-family: Verdana, Tahoma, sans-serif;
text-align: justify;
font-size: 16px;
font-weight: 100;
color: black;
}
.imgWrap {
width: 95%;
margin: 0 auto;
}
.imgWrap img {
float: right;
margin: 0 0 0 30px;
}

/*########################################### SMALL SCREENS <= 768px */

@media screen and (max-width: 768px) {
.imgWrap {
width: 100%;
}
.imgWrap img {
float: none;
margin: 0;
max-width: 100%;
}
}
</style>
</head>

<body>
<!-- ############################################# B O D Y -->

<section class="imgWrap"> <img src="photo_1600.jpg" alt="Photo 1" style="width:800px;">
<h3>CONTENT HEADING</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
</section>
<!-- -->
<p style="clear:both; margin-top: 0; margin-bottom: 0;"></p>
<section class="imgWrap"> <img src="photo_1600.jpg" alt="Photo 2" style="width:500px;">
<h3> NEXT CONTENT HEADING </h3>
<p>Nam eleifend ultrices metus, ut auctor ipsum porttitor ut. Etiam imperdiet euismod mi ac tincidunt. Proin
commodo, dui a venenatis molestie, ex diam maximus magna, quis volutpat quam mi at mi. Nam ullamcorper ipsum
nec mauris vulputate tincidunt. Suspendisse neque lacus, pretium sit amet sapien ac, eleifend viverra metus.
Sed molestie diam sit amet risus pellentesque mollis. Cras nec risus libero. Sed condimentum finibus orci.
Phasellus non ligula auctor, sodales felis sit amet, facilisis metus. Aliquam quis ante sollicitudin,
tincidunt nisi et, consequat ex. Aenean vitae euismod risus. </p>
<p>Nullam a iaculis quam, tristique vehicula nibh. Vestibulum sit amet felis bibendum, feugiat turpis non,
aliquet risus. Etiam sit amet enim et tellus tempus consectetur. Morbi semper auctor nibh, ultrices
pellentesque urna lobortis a. Aenean consequat vel dui vitae rutrum. Vivamus ut luctus sapien. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in condimentum mauris. In et
est sit amet ex consequat consectetur hendrerit quis ante. Etiam bibendum leo eget neque bibendum, nec
vehicula mauris ultricies. Proin venenatis nunc tortor, non egestas neque finibus id. Suspendisse auctor
nunc non erat imperdiet tristique. Nulla vulputate nulla ut auctor tristique. Nulla sit amet tempor elit,
vel aliquam libero. </p>
</section>
<!-- -->
</body>
</html>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied

 

See if the below code works for you:

You don't need the <p></p> tag inbetween the <section> tags for clearing the floated images - just add 'overflow: hidden;' to the 'imgWrap' section css as shown in the example code below, that is a cleaner solution for clearing the float. Also don't set a style attribute on the image tag, set any widths required in the css, as shown below in the example code.

 

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Wrap SK2</title>
<style>
/*############################################# ALL SCREENS */
/* NB: Margins: T-R-B-L, T-RL-B, TB-RL, TRBL */
p {
font-family: Verdana, Tahoma, sans-serif;
text-align: justify;
font-size: 16px;
font-weight: 100;
color: black;
}
.imgWrap {
width: 95%;
margin: 0 auto 70px auto;
overflow: hidden;
}
.imgWrap img {
float: right;
margin: 0 0 0 30px;
width: 50%;
}
@media screen and (max-width: 1200px) {
.imgWrap img {
width: 70%;
}
}

/*########################################### SMALL SCREENS <= 768px */

@media screen and (max-width: 900px) {
.imgWrap {
width: 100%;
}
.imgWrap img {
float: none;
margin: 0;
width: 100%;
}
}
</style>
</head>

<body>
<!-- ############################################# B O D Y -->

<section class="imgWrap"> 
<img src="https://dummyimage.com/1600x800" alt="Photo 1">
<h3>CONTENT HEADING</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
</section>
<!-- end imgWrap -->


<section class="imgWrap">
<img src="https://dummyimage.com/1600x800" alt="Photo 2">
<h3> NEXT CONTENT HEADING </h3>
<p>Nam eleifend ultrices metus, ut auctor ipsum porttitor ut. Etiam imperdiet euismod mi ac tincidunt. Proin commodo, dui a venenatis molestie, ex diam maximus magna, quis volutpat quam mi at mi. Nam ullamcorper ipsum nec mauris vulputate tincidunt. Suspendisse neque lacus, pretium sit amet sapien ac, eleifend viverra metus. Sed molestie diam sit amet risus pellentesque mollis. Cras nec risus libero. Sed condimentum finibus orci. Phasellus non ligula auctor, sodales felis sit amet, facilisis metus. Aliquam quis ante sollicitudin, tincidunt nisi et, consequat ex. Aenean vitae euismod risus. </p>
<p>Nullam a iaculis quam, tristique vehicula nibh. Vestibulum sit amet felis bibendum, feugiat turpis non, aliquet risus. Etiam sit amet enim et tellus tempus consectetur. Morbi semper auctor nibh, ultrices pellentesque urna lobortis a. Aenean consequat vel dui vitae rutrum. Vivamus ut luctus sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in condimentum mauris. In et est sit amet ex consequat consectetur hendrerit quis ante. Etiam bibendum leo eget neque bibendum, nec
vehicula mauris ultricies. Proin venenatis nunc tortor, non egestas neque finibus id. Suspendisse auctor nunc non erat imperdiet tristique. Nulla vulputate nulla ut auctor tristique. Nulla sit amet tempor elit, vel aliquam libero. </p>
</section>
<!-- end imgWrap -->
</body>
</html>

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 19, 2021 Apr 19, 2021

Copy link to clipboard

Copied

Thanks again Osgood.

 

I had been looking up "overflow" on W3Schools and elsewhere and I never saw an indication that it could be used as you have here. Makes me wonder if there are many elements, tags and properties out there which are being used in new and interesting ways that maybe weren't envisaged and aren't covered in the guides - Maybe not really supported - Whole new topic.

 

I see you have addresssed the "awkward" phase by adding another media query. This should be feasible for me.

 

I expected you to pick up on my insertion of styles in the image tag. Bit of temporary laziness / expedience on my part, which I will learn to avoid.

 

I had been experiencing problems getting images to float and wrap text when specifying image width as a %. That led me to try linking to different size images with srcsets and it gave me a headache. But I see it is working fine here.

 

Thank you also for the Dummy Image Generator site - Love it!

 

Sean

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines