Known Participant

Answered

How do I place on a text-wrapped floating image?

Forum|Forum|4 years ago
May 8, 2021
2 replies
4556 views

I am having trouble placing text on an image that has float, particularly for wrapping text. I can place a caption below, I can place text in flex-boxed images, but I have not yet figured out how to do it for an image with float. I figure if I have the txt in a container with the image, it ought to stay with it, but it does not. I want to figure this out in plain old HTML and CSS. I'll look at Bootstrap maybe after I have this figured. Here is my futile attempt so far (CSS could use compaction but I'm leaving it like this until I have it cracked):

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SK Test Wrap 2</title>
<style>
.wrapimage-right-50 {
    margin: 0 auto 20px auto;
    overflow: hidden;
}
.wrapimage-right-50 img {
    float: right;
    margin: 0 0 0 0;
    margin-left: 20px;
    width: 50%;
}
.wrapimage-right-50 figcaption {
    float: right;
    width: 50%;
    color: red;
}
.contentheading {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 150%;
    font-weight: bold;
    margin-top: 0;
}
.textonimage {
    position: relative;
}
.textonimage img {
    text-align: center;
}
.imagetext_topleft {
    top: 10px;
    left: 10px;
    width: 50%;
    position: absolute;
    color: blue
}
.imagetext_topright {
    top: 10px;
    right: 10px;
    float: right;
    width: 50%;
    position: absolute;
    color: blue
}
.imagetext_btmleft {
    bottom: 30px;
    left: 10px;
    float: right;
    width: 50%;
    position: absolute;
    color: blue
}
.imagetext_btmright {
    bottom: 10px;
    right: 10px;
    float: right;
    width: 50%;
    position: absolute;
    color: blue
}
</style>
</head>

<body>
    
    <!-- #################################### CAPTION BELOW IMAGE -->
    
    <section class="wrapimage-right-50">
        <figure>
            <img src="https://www.dummyimage.com/1600x800/" alt="Photo 2">
            <figcaption>Block 1 Caption Below</figcaption>
        </figure>
        <div class="contentheading">Image Wrap Text - Right + Caption Below</div>
        <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>
    
    <!-- #################################### CAPTION IN IMAGE -->
    
    <section class="wrapimage-right-50">
        <figure class="textonimage">
            <img src="https://www.dummyimage.com/1600x800/" alt="Sunset">
            <div class="imagetext_topleft"> Caption in Picture - Top Left </div>
            <div class="imagetext_topright"> Caption in Picture - Top Right </div>
            <div class="imagetext_btmleft"> Caption in Picture - Bottom Left </div>
            <div class="imagetext_btmright"> Caption in Picture - Bottom Right </div>
        </figure>
        <div class="contentheading">Image Wrap Text - Right + Caption in Picture</div>
        <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>

This topic has been closed for replies.

Correct answer osgood_

You need to float the 'figure' element that the image is contained within, NOT the image itself.

/* FLOAT FIGURE ELEMENT */

.wrapimage-right-50 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 50%;
}

/* ADD BELOW TO PREVENT IMAGE SPILLING OUT OF FIGURE ELEMENT */
.wrapimage-right-50 img {
max-width: 100%;
}

/* THEN UPDATE THE CSS SELECTORS BELOW */

/*TOP LEFT*/
.imagetext_topleft {
top: 10px;
left: 10px;
position: absolute;
color: blue
}
/*TOP RIGHT*/
.imagetext_topright {
top: 10px;
right: 10px;
position: absolute;
color: blue
}
/*BOTTOM LEFT*/
.imagetext_btmleft {
bottom: 10px;
left: 10px;
position: absolute;
color: blue
}
/*BOTTOM RIGHT*/
.imagetext_btmright {
bottom: 10px;
right: 10px;
position: absolute;
color: blue
}

O

osgood_Correct answer

Brainiac

You need to float the 'figure' element that the image is contained within, NOT the image itself.

/* FLOAT FIGURE ELEMENT */

.wrapimage-right-50 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 50%;
}

/* ADD BELOW TO PREVENT IMAGE SPILLING OUT OF FIGURE ELEMENT */
.wrapimage-right-50 img {
max-width: 100%;
}

/* THEN UPDATE THE CSS SELECTORS BELOW */

/*TOP LEFT*/
.imagetext_topleft {
top: 10px;
left: 10px;
position: absolute;
color: blue
}
/*TOP RIGHT*/
.imagetext_topright {
top: 10px;
right: 10px;
position: absolute;
color: blue
}
/*BOTTOM LEFT*/
.imagetext_btmleft {
bottom: 10px;
left: 10px;
position: absolute;
color: blue
}
/*BOTTOM RIGHT*/
.imagetext_btmright {
bottom: 10px;
right: 10px;
position: absolute;
color: blue
}

GaleodanAuthor

Known Participant

You need to float the 'figure' element that the image is contained within, NOT the image itself.

By @osgood_

Thanks - That's just what I was trying to do to keep the elements together. I tried a bunch of variations but it never quite clicked.

O

osgood_

Brainiac

OK. getting personal again. In that case how can you mislead the OP by saying

.wrapimage-right-50 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 50%;
}

This ties the `figure` down to a width of `50%`, meaning that you would have to create a class for each different sized image. And to think that this answer was marked as `correct`.

The correct way is to display `figure` as an `inline-block` causing it to automatically adjust to the intrinsic size of the image.

OK. getting personal again. In that case how can you mislead the OP by saying

.wrapimage-right-50 figure {
position: relative;
float: right;
margin: 0;
margin-left: 20px;
width: 50%;
}

This ties the `figure` down to a width of `50%`, meaning that you would have to create a class for each different sized image. And to think that this answer was marked as `correct`.

The correct way is to display `figure` as an `inline-block` causing it to automatically adjust to the intrinsic size of the image.

inline-block won't limited the image to be 100% of its container. If I set the image to a specific size like 400px or 300px you can use inline block but then the image/container is NOT responsive...........so to say its misleading/incorrect to set the container to a percentage size is incorrect. Generally you would want to use a larger image than is necessary to cater for smaller screen devices where the image is likey going to be full width of the screen, unless of course you switch out the images using scrset or javascript..........but hey its a matter of choice and how you are setting the construction up for various senarios.

I'm not being personal, just making observations which no-one really can usually be bothered to anwser or address because generally they are observations which developers like to forget, those that use framework/niche workflows.

In the case of your Bootstrap example you forget to mention that you are using thousands of lines of unneeded css in the default Bootstrap css file just to do something which take a few lines of css and a few kbs.

Nancy OShea

Community Expert

You must position both elements -- the figure and the figcaption which has consequences because you're working with floated images. It might be easier to just add some caption text to the actual image with Photoshop. That said, see this tutorial.

https://alt-web.com/TUTORIALS/?id=responsive_text_overlays

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

I realize now you want 4 captions OUCH!

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

<style>
figure.overlay {    
position: relative;    
z-index: 1;  
/**same size as image**/
height: 600px;    
width: 900px;
}  

figure.overlay img {
height:600px; 
width: 900px;
}
    
figure.overlay figcaption {    
position: absolute;    
z-index: 1000;   
font-weight: 700;
text-shadow: 2px 1px 1px #000, 0 0 15px #FFF;
font-size: 24px;  
}

/**adjust values as required**/
.tp-lt{top: 25px; left: 12px; color:whitesmoke;}
.tp-rt{top: 25px; left:700px; color:aquamarine;}
.bt-lt{top:550px; left: 12px; color:orchid;}
.bt-rt{top: 550px; left:700px; color: lightsalmon}

</style>
</head>
<body>
<div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.</p>
<figure class="overlay">      
<img src="https://placeimg.com/900/600/people/1" alt="person">
<figcaption class="tp-lt"> Figcaption tp-lt</figcaption> 
<figcaption class="tp-rt"> Figcaption tp-rt</figcaption> 
<figcaption class="bt-lt"> Figcaption bt-lt</figcaption> 
<figcaption class="bt-rt"> Figcaption bt-rt</figcaption> 
</figure>
</div>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

OK. This version is floated AND responsive.

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

<style>
p.wrap {position:relative; border:1px dotted silver;}

figure {float:right}

figure.overlay {    
position: relative; 
z-index: 1;  
border:4px solid red;
box-sizing: border-box;
}  

figure.overlay img {
height:100%; 
width: 100%;
}
    
figure.overlay figcaption {    
position: absolute;    
z-index: 1000;   
font-weight: 700;
text-shadow: 2px 1px 1px #000, 0 0 15px #FFF;
font-size: 3.0vw;  
}

/**adjust values as required**/
.tp-lt{top: 5%; left: 2%; color:whitesmoke;}
.tp-rt{top: 5%; left:68%; color:aquamarine;}
.bt-lt{top:86%; left: 2%; color:orchid;}
.bt-rt{top:86%; left:68%; color: lightsalmon}

</style>
</head>
<body>
<div>

<p class="wrap">
<figure class="overlay">      
<img src="https://placeimg.com/900/600/people/1" alt="person">
<figcaption class="tp-lt"> Figcaption tp-lt
</figcaption> 
<figcaption class="tp-rt"> Figcaption tp-rt
</figcaption> 
<figcaption class="bt-lt"> Figcaption bt-lt
</figcaption> 
<figcaption class="bt-rt"> Figcaption bt-rt
</figcaption> 
</figure>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem expedita odio, debitis mollitia quod dolores at ipsa corrupti quas numquam assumenda illum, sunt rerum amet consectetur possimus veniam aliquam velit.</p>
</div>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded