Floating image along with accompanying text; CSS styles have not been incorporated

Question

Floating image along with accompanying text; CSS styles have not been incorporated

As I work on developing my web application and utilize a bootstrap template, I encountered a situation where I needed to include an inline image with text, with the image floating to the left and the text positioned to the right.

The paragraph element in the html was contained within a div. To achieve the desired layout, I researched and came across suggestions to add an img property to the CSS rule of the parent div. Below is the structure in which I attempted to insert the image:

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
      <p style='float:right;' > <img src={{ url_for('static',filename='img/ankulGupta.tiff') }}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

While attempting to add the float rule to the image, I encountered some difficulties. Despite defining the relevant CSS rules within the parent div, the image layout didn't respond as expected. Eventually, I resorted to directly adding style rules to the img tag to achieve the desired effect:

<img style='float:left; margin-right:10px; margin-top:8.5px; width: 210px; height:194px' src={{ url_for('static',filename='img/img.jpg') }}>

It seems the CSS rules didn't apply properly, prompting me to seek clarification on what might have caused the issue. If you have insights or suggestions on how to better structure the CSS rules for the image, as a beginner in web development, I would greatly appreciate any guidance.

html css

Answer 1

Answer №1

There is a problem in the code snippet row>img. In CSS, the > symbol is used to select direct children of a parent element. However, in this case, img is not a direct child but a grandchild. To fix this, update your code to the following:

.row img{
   display: inline-block;
   float: left;
 }

You also mentioned that the above code is not working. In that case, make sure to apply all remaining styles to properly format the inline img tag. Here is an example:

.row img{
   margin-right:10px; margin-top:8.5px; width: 210px; height:194px;
   float: left;
 }

Code Snippet:

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.row img{
  margin-right:10px; margin-top:8.5px; width: 210px; height:194px;
  float: left;
}

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
      <p style='float:right;' > <img src='img/ankulGupta.tiff'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

Answer 2

There is a problem in the code snippet row>img. In CSS, the > symbol is used to select direct children of a parent element. However, in this case, img is not a direct child but a grandchild. To fix this, update your code to the following:

.row img{
   display: inline-block;
   float: left;
 }

You also mentioned that the above code is not working. In that case, make sure to apply all remaining styles to properly format the inline img tag. Here is an example:

.row img{
   margin-right:10px; margin-top:8.5px; width: 210px; height:194px;
   float: left;
 }

Code Snippet:

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.row img{
  margin-right:10px; margin-top:8.5px; width: 210px; height:194px;
  float: left;
}

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
      <p style='float:right;' > <img src='img/ankulGupta.tiff'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus! Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</div>

Answer 3

Answer №2

The reason why the .row>img selector only works if img is a direct child of the row container in the DOM tree structure is because of the specificity of the CSS selector. To resolve this issue, it's recommended to use a more generic approach like the following:

.row img {
  display: inline-block;
  float: left;
}

Alternatively, if you want a more specific styling solution, you can apply a class selector to the images:

.image-style {
  display: inline-block;
  float: left;
}

<img class="image-style" src={{ url_for('static',filename='img/img.jpg') }}>

Answer 4

The reason why the .row>img selector only works if img is a direct child of the row container in the DOM tree structure is because of the specificity of the CSS selector. To resolve this issue, it's recommended to use a more generic approach like the following:

.row img {
  display: inline-block;
  float: left;
}

Alternatively, if you want a more specific styling solution, you can apply a class selector to the images:

.image-style {
  display: inline-block;
  float: left;
}

<img class="image-style" src={{ url_for('static',filename='img/img.jpg') }}>

Answer 5

Answer №3

In order to ensure the CSS is properly applied to the image, it is necessary to adjust your CSS rule as follows:

.row > div > p > img {                                                          
  display: inline-block;
  float: left;
}

The reason your rule is not working is because the img tag is not a direct child of the .row element.

Answer 6

In order to ensure the CSS is properly applied to the image, it is necessary to adjust your CSS rule as follows:

.row > div > p > img {                                                          
  display: inline-block;
  float: left;
}

The reason your rule is not working is because the img tag is not a direct child of the .row element.

Answer 7

Answer №4

.row img{
  display: inline-block;
  float: left;
}

Modify to the following format:

.row img{
  display: inline-block;
  float: left;
}

Trust this adjustment proves beneficial to you.

Answer 8

.row img{
  display: inline-block;
  float: left;
}

Modify to the following format:

.row img{
  display: inline-block;
  float: left;
}

Trust this adjustment proves beneficial to you.

Floating image along with accompanying text; CSS styles have not been incorporated

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Selecting elements using XPath

The floated div is disrupting the flow due to its margin

Issue with Vue2: encountering an error with the view-router component when attempting to utilize the <router-view> tag

Having difficulty stripping HTML tags from the response JSON

Tips for removing the Y-Axis entirely from a CanavasJS chart

Showing a JSON file in an HTML page

What is the best way to restrict a link to only a specific div element and not a Bootstrap

Animated collapse with margin effect in Material-UI

Having trouble making the swing effect trigger on mouseover but not on page load

Styling the pseudo element ::part() on an ion-modal can be customized based on certain conditions

How to store various check-box selections as separate entries using PHP

Utilize styling only when both classes are actively used within media queries or bootstrap

Is Material UI equipped to handle CSS Container Queries?

Unable to use the select function in Android 2.2

Using JavaScript to interact with elements inside an iframe on a webpage

Clicking the submit button on a PHP contact form will prompt the opening of

Achieving the perfect alignment for expandable divs next to a consistently centered element using CSS

Incorporate a glyphicon into a webpage design that wasn't originally built with bootstrap while maintaining the original layout

What methods can I use to visually distinguish external links from those on my website?

Is there a way to access a large HTML file?