Skip to main content
Galeodan
Galeodan
Known Participant
May 8, 2021
Answered

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

  • 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
    }

    2 replies

    O
    osgood_Correct answer
    Legend
    May 8, 2021

    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
    }

      Galeodan
      GaleodanAuthor
      Known Participant
      May 9, 2021
      quote

      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_
      Legend
      May 9, 2021
      quote
      quote

      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.


      By @Galeodan

       

      No problem, its nice to see someone in the forum taking an actual interest in what they are doing for a change and using the traditional workflow instead of resorting to frameworks........thats the way you will learn faster and be able to solve more issues in the future.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      May 8, 2021

      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
      Nancy OSheaCommunity Expert
      Community Expert
      May 8, 2021

      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
      Nancy OSheaCommunity Expert
      Community Expert
      May 8, 2021

      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
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices