Skip to main content
C
cathye39663615
Participant
December 22, 2024
Question

aligning text with image using using dreanvweaver cc

  • December 22, 2024
  • 3 replies
  • 1234 views

I am trying to align text with an imahe  the folloeing is the css for the image and html

 

css  in external  style sheet

.parrotimg {
float left;
margin: 0 10px 10px 10px;
width: 195px;
height: 156px;
}

 

I then added the html

<div class="parrotimg"><img src="Images/red_parrot_on_computer_lg_clr_6287.gif">Text goes here</</div>

However, I dont know the css to align text with image

 

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 22, 2024

    What you're attempting to do will NOT perform well on ALL mobile, tablet & desktop devices.  It's not a responsive layout approach for the best user experience. 

     

    However, this Bootstrap 5 layout will work by breaking to vertically-stacked-content on small devices. 

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Wrapping Around Image</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.content img {
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
</head>

<body>
<div class="container py-5">
<div class="row">
<div class="col-md-8">
<div class="content">
<img src="https://dummyimage.com/600x400/0011ff/ffffff.jpg&text=placeholder+image"
alt="Placeholder Image" class="img-fluid float-md-end me-md-3 mb-3">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, nihil dicta ex facere maiores delectus laudantium aliquam error, quam autem in laboriosam omnis perferendis illo, eius unde hic officia dolor.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, nihil dicta ex facere maiores delectus laudantium aliquam error, quam autem in laboriosam omnis perferendis illo, eius unde hic officia dolor.</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

     

    Hope that helps.

     

     

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    December 22, 2024

    Do you want the text to sit to the right and wrap under the image or do you want the text to sit to the right of the image regardless of the height the text makes?

     

    If you want the text to wrap around the image then float the image as suggested by Ben. If you don't want the text to wrap around the image then use display: flex; for the parrotimg css div rather than float: left;

    C
    cathye39663615Author
    Participant
    December 22, 2024

    text to the right of the image and wrap around

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    December 22, 2024

    CSS:

     

    .parrotimg {
  float: left;
  margin: 0 10px 10px 0; /* Adjust margins as needed */
}

.parrotimg img {
  width: 195px;
  height: 156px;
  display: block; /* Ensures the image is treated as a block element */
}

     

     

    HTML:

     

    <div class="parrotimg">
  <img src="Images/red_parrot_on_computer_lg_clr_6287.gif" alt="Parrot">
</div>
<p>Text goes here</p>

     

     

    Explanation:

    Float: The float: left; property makes the image float to the left, allowing text to wrap around it.

    Margin: Adjusting the margins ensures there's space around the image so the text doesn't stick right up against it.

    Display: Setting the image to display: block; ensures it behaves as a block element, preventing any inline display issues.

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    C
    cathye39663615Author
    Participant
    December 23, 2024

    I have copied the CSS and HTML but the text doesn't wrap  If you go to animalandhumannutrition101.com you can see what I've done

     

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    December 23, 2024

    I am sorry, but I cannot connect.

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices