Guide on positioning content around an image

I am currently in the process of developing an about page for my personal website. I am seeking advice on how to achieve a text wrapping effect around an image, similar to what is showcased on this website:

Below is the code I have implemented thus far:

 <div class="about_content">
            <img src="placeholder.jpg" alt="">
            <h2>The Brand</h2>
            </p>
            The Tailory New York is an appointment only custom clothing              company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market.
           </p>
            <h2>The Concept </h2>
                <p>
                    Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle.
                </p>
            <h2>A Note From the Founder</h2>
                <p>
                    The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style.
                    My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best.
                    At The Tailory New York, “we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.” Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br>
                    <br> </br>
                    Sincerely,</br>
                    Shao Yang, Founder 
                    <br> </br>
                </p> 
        </div>

In addition, here is the CSS code being utilized:

h2{
    margin: 0 0 1.2em 0;
    font-family: 'Raleway', 'sans-serif';
    font-weight: normal;
}

.about_content{
    width: 500px;
    overflow: hidden;
  }

.about_content img{
    margin-right: 15px;
    float: left;
}
.about_content p:last-child{
    margin-bottom: 0;
}

Answer №1

The current setup you have will make the content wrap around the image. To achieve this, you need to apply float: left; to the image, which you have already done.

It seems like the issue is that your image might be too wide. If it exceeds 500px in width, it will occupy the full width of .about_content, so you should restrict the size of the image. Here's an example using max-width on the image.

h2{
    margin: 0 0 1.2em 0;
    font-family: 'Raleway', 'sans-serif';
    font-weight: normal;
}

.about_content{
    width: 500px;
    overflow: hidden;
}

.about_content img{
    margin-right: 15px;
    float: left;
    max-width: 250px;
}

.about_content p:last-child{
    margin-bottom: 0;
}
 <div class="about_content">
            <img src="https://static1.squarespace.com/static/541ff355e4b03f1e8815bc58/t/54b43e30e4b0ad2aad39a7f2/1421098552235/budak?format=500w" alt="">
            <h2>The Brand</h2>
            <p>
                The Tailory New York is an appointment-only custom clothing company that blends modern Fashion Design with the traditional art of Custom Tailoring. We cater to both the Men and Women markets.
           </p>
            <h2>The Concept </h2>
            <p>
                Providing personally designed, fitted, and curated collections for each client is at the core of our values. At The Tailory New York, we believe that your wardrobe should not only fit perfectly but also be designed exclusively for YOU. The outcome? Clients get both flawless custom fit and custom-designed pieces that seamlessly integrate with their lifestyle.
            </p>
            <h2>A Message From the Founder</h2>
            <p>
                The inspiration behind The Tailory New York began when I decided to channel my experience in fashion design and men’s tailoring into my own wardrobe. Being a fan of pant suits and men’s fashion, I always admired tailored clothing and aimed to create fashion that exuded the same confidence as a perfectly tailored suit does for men. Style icons like Sean Connery, Cary Grant, and the modern-day 007 Daniel Craig were my style influences. They epitomize elegance and sophistication, true gentlemen in style.
                My love for fashion and tailoring guided me through the Fashion Design program at Parsons, leading to roles in custom tailoring, fashion design, fashion styling, and branding. As I delved deeper into the industry, I realized that achieving impeccable fit in ready-to-wear clothing, for both men and women, was quite challenging. This realization prompted me to launch The Tailory New York, where I could merge my two passions – Fashion Design and Custom Tailoring. Everyone desires to look their best, and having a wardrobe tailored to fit your body and lifestyle not only enhances your appearance but also boosts your confidence.
                At The Tailory New York, "we believe that your wardrobe should not only fit perfectly but also be designed exclusively for YOU." Creating personalized, fitted, and curated collections for every individual client defines who we are. Allow us to curate and craft a wardrobe that suits YOU! <br>
                    <br> </br>
                    Warm regards,</br>
                    Shao Yang, Founder 
                    <br> </br>
                </p> 
        </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The header and logo are missing from my webpage

I am facing an issue where my navigation bar is not displaying at the top of my screen, even though there are no syntax errors. Is there something in the syntax that needs to be adjusted? Or did I overlook something in my default template file? The webpage ...

Retrieving Hyperlinks from JavaScript Object for Integration with D3-Created Table

Issue: I'm facing a problem where the HTML link extracted from an Associative Array is treated as a string instead of being applied as a clickable link in the browser. For a detailed visual example and code snippet, visit: http://example.com/code Da ...

HTML features various product displays across multiple pages

I am struggling with the terminology for my issues. I am currently working on an e-commerce project aimed at displaying products. My goal is to have only 30 products shown on each page, with product 31-60 displayed on page 2 and product 61-90 displayed on ...

Interact with the :before pseudo element when hovering over an element

Is there a way to manipulate the :before pseudo element when hovering over the main element? My goal is for the pseudo element to change its height when I hover over the main element. This is how my code looks: HTML <div class="object">& ...

What is the best way to adjust the vertical distance between a Material UI FormLabel and Slider element?

I am currently developing a map that includes an image overlay with adjustable opacity. Below is the code for this component: import React from 'react' import PropTypes from 'prop-types' import { MapWithGroundOverlay } from './Map ...

Looking to create a centered 'ul' using Bootstrap

I am looking to center the list with a specific width. body { background-color: rgb(26, 40, 114); } h1 { color: white; text-shadow: 7px 7px 10px black; } li { list-style: none; border-radius: 5px; border: 2px solid white; background-colo ...

How can I effectively design a vertical table with a split background for optimal visual appeal?

Is there a way to creatively present this data with a split background using html and css? https://i.sstatic.net/qsCOM.png ...

MVC doesn't clear the textbox on submit when utilizing Ajax

I'm seeking assistance with a small issue I'm encountering. I am using AjaxBeginForm to submit a question in a text field, and while the question gets posted successfully to the database, it doesn't clear from the field. The reason for utili ...

Steps to incorporate Ajax into current pagination system built with PHP and Mysql

Greetings! I am a beginner programmer looking to enhance my PHP & Mysql based pagination with Ajax functionality. Despite searching through numerous tutorials, I have been unsuccessful in finding a guide that explains how to integrate Ajax into existin ...

Unlocking the hidden div puzzle in Bootstrap: A step-by-step guide

Currently, I am working on a website project that utilizes Bootstrap. On the right side of the page, there is a column containing a search module and various other elements. However, this column is hidden on smaller screens. I am looking to bring back only ...

Discovering the best way to choose a button from every button group at once (non-radio) in Bootstrap

Whenever I choose a button from one group, it works perfectly. However, when I select a button from the next group, it seems to forget the selection I made in the first group. This is a common issue that has been discussed on Stack Overflow multiple times. ...

Click a button to adjust the height of an element

My webpage features a dashboard with tabs on the left and corresponding content on the right. To ensure proper alignment, I have utilized Bootstrap to create two columns - one for the tabs and one for the content. However, I am facing an issue where the bo ...

Set the minimum height of a section in jQuery to be equal to the height of

My goal is to dynamically set the minimum height of each section to match the height of the window. Here is my current implementation... HTML <section id="hero"> </section> <section id="services"> </section> <section id="wo ...

The @viewport tag is malfunctioning on iOS devices when used in CSS

Due to certain limitations, I am unable to make any changes to the HTML code of the project I am currently working on. As a result, I am unable to include the following attribute: <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

JavaScript function failing to utilize innerHTML output

Having trouble with my BMI calculator code. Even after adding sample text for testing in JavaScript, the function still isn't working. Can someone help me figure out what's wrong? <h2>Welcome to BMI calculator</h2> <h4>Please ...

Adjust input dimensions dynamically with Ajax

Currently, I am utilizing an input form to collect user input in the form of an OTP. This OTP can range from 4 digits, 5 digits, to 6 digits. The approach I have taken so far is functional but lacks dynamism. It necessitates a page refresh to display the d ...

CSS/React JS: I wish for the input fields to maintain focus even after entering values

I'm working with a confirmation code that is made up of 6 digits. I've noticed that when I click on an input field, it becomes focused and underlined in blue. However, as soon as I start typing in the next input field, the blue underline disappe ...

Increase the size of a div to equal the combined width of two divs located directly below it

I need help aligning 3 divs so that the top div stretches to match the width of the bottom 2 divs combined. Here is an image showing the expected div positioning. I attempted to use display: table-row for the divs. <div id="main_div" style="display: ta ...

Creating an art exhibit in an illuminated amp lightbox using Django

Currently, I am immersed in a project that involves Django on the back-end and amp on the front-end. However, I am facing some challenges in connecting both tags, particularly when it comes to implementing a lightbox feature. What I aim to achieve is a li ...

Change the location of an html td element with JavaScript

I am currently working on a simple JavaScript car racing game where the cars are represented by HTML table elements. I want to implement functionality where pressing the "e" key moves player one's car and the "d" key moves player two's car. This ...