Text does not conform to image boundaries

I've been having trouble with this issue and despite trying various solutions, I haven't been able to figure it out. I'm new to this so it's likely something very simple that I'm overlooking...

.container {
 width: 80%;
 margin: auto;
 overflow: hidden;
}

#about {
 min-height: 500px;
 color: white;
 padding: 40px 100px;
}

#about h1, p {
 float: left;
}

#about img {
 float: right;
}
<section id="about">
 <div class="container">
   <h1>About</h1>
   <p>Lorem ipsum dolor sit amet</p>
   <img src="https://picsum.photos/250/250">
 </div>
</section>

cssimageword-wrapparagraph

Answer №1

When dealing with floated elements, only inline elements will flow around them. However, both the h1 and p tags in this case are block elements. One solution is to change their displays to inline-block, but a more effective approach might be to place the image inside the p tag along with the text itself. Since text has inline styling by default, it will naturally flow around the floated image.

.container {
 width: 80%;
 margin: auto;
}

#about {
 min-height: 500px;
 padding: 40px 100px;
}

#about img {
 float: right;
}
<section id="about">
 <div class="container">
   <h1>About</h1>
   <p><img src="https://picsum.photos/250/250">Lorem ipsum dolor sit amet</p>
 </div>
</section>

Answer №2

I encountered a similar issue when using Bootstrap 4 alongside a local style.css file. To resolve it, I removed the float: left; for the "#about h1, p" selector. Surprisingly, I didn't even need to set the "display: inline-block;" declaration for the h1 and p elements for it to work.

Below is the snippet of my code:

.about p {
  font-size: 25px;
  min-width: 300px;
  text-align: justify;
  text-indent: 15px;
  font-weight: bold;
}
.me {
  height: 400px;
  margin: 0 30px 10px 0;
  box-shadow: 2px 5px 10px 0 hsla(240, 100%, 35%, 1);
}

<head>
  <!-- link to Bootstrap CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<body>
  <section class="container bg-primary text-white about" id="about">
        <img src="./images/me.JPG" alt="my picture" class="me rounded float-left"/>
        <h1 class="font-weight-bold display-4">About Me...</h1>
        <p>Hi there! My name is Mohsen, and I'm from Shiraz. I love to learn new things, and though I had just begun to learn about front-end web-development, I'm very
          passionate about it.</p>
      </section>
    </body>

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

Fixed Row Feature in Visual Composer

Currently, as I work on a website in Wordpress utilizing the Visual Composer page builder, I have encountered a dilemma. I am attempting to ensure a row remains sticky at the top of the page. In an effort to achieve this, I have inserted the following CSS ...

csssticky

Combining Angular and Bootstrap: how to create two overlapping divs

Looking to enhance a project in Angular 15 + bootstrap 5 by creating two draggable divs where the lower one can be vertically resized to overlap the upper one? I've managed to set up most of it, but when dragging the lower div, its transparency makes ...

htmlcssangularbootstrap-5

Guide on how to organize a list into three columns using a single ul tag

Is there a way to split a ul list into 3 columns using CSS? This is how my HTML structure looks like: <ul> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li> ...

htmlcssfrontend

How can I assign a class to my Typography component in Material UI?

When using my material-ui component, I wanted to add an ellipsis to my Typography element when it overflows. To achieve this, I defined the following styles: const customStyles = (theme) => ({ root: { textAlign: "left", margin: theme.spacing( ...

cssstylesmaterial-uioverflowtypography

Incorporating design library styles (js variables) into my scss documents

I have been tasked with utilizing a custom design library that exports styles, such as fonts and font weights, as JavaScript objects. However, my code base primarily consists of SCSS files. Is there a method to incorporate JavaScript objects into my SCSS f ...

cssreactjssassscss-mixins

What can I do to prevent the border from breaking apart when I zoom in?

To address the problem of the 1px black border at the bottom of the header being cut off, try zooming into the page and scrolling right. How can this issue be resolved? ...

htmlcssxhtmlborder

The icon for the weather on openweathermap is currently not displaying

Take a look at what my webpage looks like: http://prntscr.com/dg6dmm and also check out my codepen link: http://codepen.io/johnthorlby/pen/dOmaEr I am trying to extract the weather icon from the api call and display that icon (e.g. "02n") on the page base ...

javascriptjqueryhtmlcss

Design a PHP tool for generating custom CSS frameworks

After attempting to create a CSS frame generator similar to this one, I stumbled upon a solution that works well with one exception. PHP Code: <?php function print_css($parentTag, $prefix, &$dup_checker) { if ($parentTag->nodeName == &apos ...

phphtmlcss

The PHP Random Image Rotation feature in Datalife Engine is not displaying the image as intended

Having trouble with this rotate.php file. I followed the instructions on this PHP Random Image Rotation guide but the image is not showing up correctly. Here is what my code looks like: style.css .header_img { overflow: hidden; width: 1010px; margin: 0 ...

phpcssdatalife-engine

Tips for locking the position of a table header and allowing only the table body to scroll

I have designed a table with tbody consisting of 2 tr elements. One tr is used for hiding/showing data. I am trying to keep the Table header fixed while only scrolling the table body. However, as I am using angular js ng-repeat on the tbody, I am encounte ...

htmlcssangularjstwitter-bootstrap-3

Guide to vertically centering Font Awesome icons inside a circular div

Is there a way to perfectly center align font awesome icons vertically? I have tried using the line-height property when text is present, and even setting the line-height equal to the height of the div. Attempts with display:inline-block and vertical-alig ...

htmlcss

Using Jquery fadeIn along with responsive CSS media queries

Issue at Hand: An issue arises with my navigation bar and text block animations. The fading effect applied on the text element causes inline styles to be added, thus disrupting the media query set to hide the text on smaller screens. If you disable the s ...

jquerycss

Using Jquery's prependTo method will add a display:block property to

Can't find a solution to this issue. This is the code snippet in question: var new_img = '<img id="' + drag_id + '" rel="' + drop_id + '" class="' + gallery_link + ' drop_out" src="' + drag_src + '" /& ...

jquerycssprepend

Tips on incorporating animations into a class design?

I'm trying to figure out how to make an image disappear by adding a class However, when I try this, the element vanishes without any animation I'd like it to fade away slowly instead I've heard there are CSS3 properties that can help achi ...

htmlcss

In Safari, my layout is disrupted by the mere mention of the word 'City'

There's something strange happening in Safari that I can't quite figure out. Here's how my layout looks in Chrome: https://i.sstatic.net/lPhnP.png But when viewed in Safari, it looks like this: https://i.sstatic.net/IMnQb.png For some r ...

htmlcssbootstrap-4web-frontend

How can I showcase the index of `<tr>` and `<td>` elements in a dynamically generated table

How can I print the index of table rows and data on click in javascript? <html> <head> <title>Table Creation</title> <script language="javascript" type="text/javascript"> function createTable() { ...

javascripthtmlcss

Struggling to align elements in a navbar using HTML and CSS?

Currently, I'm in the process of building a simple website and focusing on customizing the navbar. The logo within the navbar is created using font awesome and text, with a larger font size compared to other elements in the navbar. However, I am facin ...

htmlcss

There appears to be a CSS problem cropping up on the right side of my website

Kindly pay a visit to the following URL: dev.dgconcepts.com.pk https://i.stack.imgur.com/sBC4Dm.jpg I am puzzled by the fact that whenever we swipe left or right on mobile responsive, the website shifts slightly on both sides. I am unable to identify ...

csswordpressmobilejquery-mobile

On initial loading, Materialize JS seems to experience technical difficulties

Struggling to develop a Vue.js SPA chat application, encountering issues with Materialize CSS and JS. The JS doesn't function properly on initial load and requires a page reload to work. No errors are appearing in the console, making it challenging to ...

javascriptcssvue.jsmaterialize

Interactive Form directly linked to SQLite3 database

Looking for assistance with converting a modal from static, fake data to dynamic data from an SQLite3 database. The goal is to display a table of existing data and allow users to add new rows by clicking a +New button. However, when trying to incorporate ...

javascripthtmljquerycssdjango