Styling Images Inside a DIV Container Using CSS Float

Considering that I have 2 divs with images and text, I encountered some formatting issues when attempting to float the image to the left using float:left;. The strange formatting is ruining the layout. Below, I've included my code snippet along with a visual representation of the problem:

HTML

<div class="skills">
  <h2>My Skills.</h2>
  <div class="skill-row">
    <img class="muscle"src="images/strong.png" alt="muscle">

    <h3>Physical Capabilities</h3>
    <p>I am physically fit, tall and lean from years of playing outside.</p>

  </div>
  <div class="skill-row">
    <img class="brain" src="images/brainstorm.png" alt="brain">

    <h3>Intelligence</h3>
    <p>I am able to perform mathematical calculations with ease, and understand advanced concepts.</p>

  </div>
</div>

CSS

.skill-row{ 
width: 50%;
margin: 100px auto 100px auto; 
text-align: left; line-height: 2;
}

.muscle {
 width: 25%;
float: left;
}

.brain {
 width: 25%;
float: left;
}

Image of Site

Is there a solution to float the image to the left without disrupting the overall webpage layout?

htmlcss

Answer №1

When using the float property in CSS, it can affect other inline elements. To resolve this, you can clear the float on the other elements by adding the following code:

h3 {
 clear: left;
}

If you want to learn more about the 'clear' property in CSS, you can visit the following link: https://www.w3schools.com/cssref/pr_class_clear.asp

.skill-row{ 
width: 50%;
margin: 100px auto 100px auto; 
text-align: left; line-height: 2;
}

.muscle {
 width: 25%;
float: left;
}

.brain {
 width: 25%;
float: left;
}

h3 {
  clear: left;
}
<div class="skills">
  <h2>My Skills.</h2>
  <div class="skill-row">
    <img class="muscle"src="images/strong.png" alt="muscle">

    <h3>Physical Capabilities</h3>
    <p>I am physically fit, tall and lean from years of playing outside.</p>

  </div>
  <div class="skill-row">
    <img class="brain" src="images/brainstorm.png" alt="brain">

    <h3>Intelligence</h3>
    <p>I am able to perform mathematical calculations with ease, and understand advanced concepts.</p>

  </div>
</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

Learn how to reposition the mat-option easily

I have an angular app with an autocomplete field that I need to adjust the position of. I have consulted the official documentation under the method updatePosition, which states: "Updates the position of the autocomplete suggestion panel to ensure that it ...

cssangulartypescriptmat-autocomplete

creating a form layout with inline buttons

I have encountered an issue with aligning 2 buttons and a form with input type in a single line. Even though I have tried different approaches, I am unable to achieve the desired inline layout. Here is my current setup: .btn-registerLayout { backgr ...

htmlcsstwitter-bootstrapbootstrap-4

Personalizing the share button by changing the icon font to an image

I've been working on incorporating this share button into my website.... Although it functions properly as is, I want to switch out the icon font for an image. I attempted to modify certain CSS properties, but encountered some issues. http://jsfidd ...

jqueryhtmlcss

`There is a delay in rendering the background image on Chrome`

Once I apply a class to my button element using JavaScript, the background image (.gif) that is supposed to display afterwards takes an unusually long time to render. The button serves as a form submission. Upon being clicked, a class of "clicked" is dyna ...

javascriptcssgoogle-chrome

What is the process for incorporating a unique pop-up window in Shopify?

Hey there! I'm looking to incorporate a pop-up window that will appear when a user clicks on a link or button on the product page. This pop-up will display washing instructions, for example. I came across this code snippet, but it doesn't seem t ...

javascriptjqueryhtmlcssshopify

When a user clicks a button, Javascript will generate a fresh upload image form

I am interested in creating a button that, when clicked, generates a new image upload button within a form I have already created in HTML. My goal is to figure out the best approach for this functionality, especially considering that there is a remove butt ...

javascriptjqueryhtml

Determine the total number of instances an HTML div element is utilized within a PHP script

Having conducted interviews with over 40 individuals, I'm looking to showcase this with a PHP script. Each interview comes with its own set of CSS classes, and adding an extra class or utilizing an existing one can help me determine the total number ...

phpcsshtml

Creating websites with HTML and CSS

I am trying to enhance the style of my paragraph by applying multiple attributes, such as font color and font type, using CSS. While applying a single attribute like p {color:green} works fine, I encounter errors when trying to apply more than one line of ...

htmlcssattributes

A guide on utilizing Python with Selenium to navigate to a specific field within a frame

I am seeking assistance in using Selenium with Python to target a specific element that seems to be located inside a frame. Specifically, I am attempting to select the element with 'id' = 'kiadvany_cim' within what appears to be a windo ...

pythonhtmlselenium

Converted my Flask code into a specialized software package, encountering a perplexing TemplotNotFound error

After reorganizing my Flask code into a Python package structure, I am facing an issue where none of the HTML templates can be found when I run the code. Let me outline the simplified structure of my current Flask package. The run.py file is responsible f ...

pythonhtmlflask

Is it possible to assign a class or id to a dynamically inserted link using JavaScript?

Currently, I have code that effectively inserts a link to the selected text: document.execCommand('CreateLink', false, 'link.com') Although this method works well, I am eager to include a class/id for the link to simplify styling it w ...

javascripthtmlhyperlink

full width css slider

I am currently working on a website project for a friend of mine. She requested to have a slider for the header images. I attempted to make it full width, but it seems to be displaying differently in Firefox and Chrome, and I'm not sure why. The webs ...

htmlcss

Verify if the input field is devoid of any content or not

I am planning to create a validation form using Vanilla JavaScript. However, I have encountered an issue. Specifically, I want to validate the 'entername' field first. If the user does not enter any letters in it, I would like to display the mess ...

javascripthtmlinput

Troubleshooting CSS appendChild not functioning as anticipated

I'm attempting to manually input CSS for font-face in a new window with the following code: const css = '@font-face {font-family:Roboto; src:url("assets/fonts/Roboto-Black.ttf");}'; const head = this.externalWindow.document.getElementsByTag ...

javascripthtmlcss

Obtain pictures from MongoDB for a website using Angular6

I'm currently in the process of developing my website and I want to showcase an image from my database on the header. Each customer is assigned a unique logo based on their ID, but I'm unsure how to use Angular to display it. Below is my code s ...

htmlangularimageangular6

Seeking a more deliberate option instead of using $(window).load, one that is not as quick as $(document)

Currently, my goal is to utilize JavaScript to conceal my preloader once the DOM and key elements have been loaded. The issue lies in the fact that various iframes on my page can significantly slow down this process. It seems that using jQuery's $(do ...

javascriptjqueryhtmldom

Experience the magic of CSS Sprite once it's been successfully uploaded!

Visit the website for testing here Located at the bottom of the page are two images with hover effects - one labeled "Contact us" and the other "Jobs Available!" During local testing, these images are visible. However, once uploaded to a server, they dis ...

htmlcssftpcss-sprites

What is the best way to make the final character in the input placeholder appear in red?

Here lies my input field https://i.sstatic.net/0mJyJt.png, I'm striving to make the last character '*' appear in bold red rather than blending into the background. Despite numerous attempts, I haven't been successful in achieving the d ...

csssass

Unable to properly vertically center multiple divs within a parent div and align their elements vertically within them

I'm diving into the world of HTML/CSS and grappling with various concepts. My goal is to vertically align 2 divs within a larger div, as well as center the contents within those divs. HTML: <html> <head> <link rel="stylesheet" typ ...

htmlcssdivider

How to Delete an Added Image from a Dialog Title in jQuery

I've tried multiple solutions from various sources, but I'm still struggling to remove an image from a dialog. Whenever I attempt to do so, I end up with multiple images instead of just one. It's important to note that I only want the image ...

javascriptjquerycss