Understanding the float feature in CSS

Why is there an empty space to the left of the image in my code section?

#features{
  background-color: #f9f6f7;
}

.featuresimg{
  width: 40%;
  float: left;
}
<section id="features">
  <img class="featuresimg" src="https://via.placeholder.com/1920x1080.jpg" alt="laptop">
  <h3 class="featuresh">Free, open, simple</h3>
  <p class="featuresp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure</p>
  <h3 class="featuresh">Powerful tooling</h3>
  <p class="featuresp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p>

</section>
htmlcss

Answer №1

To eliminate the empty space, simply apply margin-left or padding-left

#features{
  background-color: #f9f6f7;
}

.featuresimg{
  width: 40%;
  float: left;
  padding-left: 50px;
}

Answer №2

The code is perfectly fine, but it appears that the issue lies within the image due to extra whitespace. Please attempt using a different image. :)

#features{
  background-color: #f9f6f7;
}

.featuresimg{
  width: 40%;
  float: left;
}
<section id="features">
  <img class="featuresimg" src="https://i.ibb.co/tYQMd3V/undraw-proud-coder-7ain.png" alt="laptop">
  <h3 class="featuresh">Free, open, simple</h3>
  <p class="featuresp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure</p>
  <h3 class="featuresh">Powerful tooling</h3>
  <p class="featuresp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p>

</section>

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

Center an element on the screen by dynamically adjusting its position according to the media query

As I work on creating a responsive website that can adapt to screens of various devices, I am facing a challenge. Each device has a different number of pixels, making it difficult to centrally position a div dynamically. Currently, I am using margin-left: ...

htmlcsstwitter-bootstrap

:after pseudo failing to function in most modern browsers other than Chrome

I've encountered an issue while creating an HTML5 form - my CSS works perfectly in all modern browsers except for Chrome: input:focus:required:invalid:after, textarea:focus:required:invalid:after { content: "!"; font-size: 20px; margin: -18px 0 4px 0 ...

htmlcssgoogle-chrome

When attempting to upload image data from the canvas, a blank image is generated

I have implemented an ajax query to send canvas image data, along with additional variables. Below is the snippet of code on the client side: front_content = document.getElementById("front_paint_canvas").toDataURL("image/png"); ajaxHandler.open("POST", " ...

phpjavascripthtmlimagecanvas

Arrange li elements in a row with the ability to scroll horizontally

I'm attempting to create a paging effect using CSS but I've run into a bit of confusion. I want to arrange all the li elements next to each other within a specified parent width so that they scroll horizontally. <ul class="flow" style="width ...

htmlcsspagination

Acquiring matching values in list box by selecting a particular value from the dropdown menu

When selecting a value from a dropdown, I want the list box to populate accordingly. For instance, if I click on "obs" in the dropdown, I expect to see "brs1", "crs1", and "drs1" in the list box. [{ "name": "obs", "date": "1458834026000", "attr001": ...

javascriptjqueryhtmljson

Populate your HTML with JSON data

I need some guidance on how to achieve a specific task. I have a PHP file that retrieves data from a MySQL database and returns it in JSON format. Now, I want to display this data in HTML with "data_from_json" replaced by "18.5". Any assistance would be gr ...

javascripthtmljson

Nuxt 3 presents challenges with unpredictable CSS behavior

I've noticed a strange issue with my CSS styling. When I first load or refresh the page, no CSS is applied. However, I found that if I make a change to the style tag - such as adding or removing 'scoped' - the CSS suddenly applies correctly ...

cssvue.jssassstylingnuxt3.js

Adjust the video resolution by selecting various sources that direct to alternate quality options

Objective: I aim to create a streamlined control system that allows for easy adjustment of video quality with minimal code. Preferences: Although I have certain limitations, I prefer to avoid reinventing the wheel by creating a custom video control sche ...

javascriptjqueryhtmlhtml5-video

Guide to creating a dynamic illumination using CSS, HTML, and JS

Can you help me create a unique lighting effect for a specific section of my webpage? I'm curious about the techniques needed to achieve a similar effect as seen on another webpage. Is it feasible to create this effect using only CSS and HTML, or are ...

htmlcsslighting

Strategies for determining the direction of a slide event within a Bootstrap carousel

I am attempting to identify the direction of the slide in a Bootstrap 4 carousel when the user initiates the slide event. Is there a method to achieve this? $('#myCarousel').on('slide.bs.carousel', function () { //Determine wheth ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

What are the steps to display JSON data within an HTML div?

Struggling to display this JSON data within an HTML div [{ "botten": ["Crispy", "thin"] }, ] The HTML document's div has the class name box1_data. Below is my script: var crustInfo = document.getElementsByClassName("box1_data"); $.getJSON(' ...

javascriptjqueryhtmljson

Use jQuery to set the onclick attribute for all elements rather than relying on inline JavaScript

I am currently facing a challenge with converting inline JS to jQuery. My goal is to eliminate all inline onclick events and instead target them by class. HTML - checkbox <td class="center"> <?php if ($product['selected']) { ?> ...

javascriptjqueryhtml

How can you ensure a div stays at the top or bottom of a page based on the user's scrolling behavior?

Hello there! While I know there have been many questions regarding sticking a div to the top or bottom while scrolling, my particular issue is a bit more specific. My dilemma is that I am looking for the div to stick either to the top or the bottom based ...

javascriptjqueryhtmltwitter-bootstrapcss

Use jQuery to extract data from an external HTML file and then effortlessly fill multiple local <div> elements with just one quick retrieval of the data

I've implemented this code and it's working well, but I've noticed that it sends three requests to the webserver: var refreshspeed=1000 function moreSnow() { $("#uptimedynamic").load("index.html #uptimedynamic"); $("#cpuloa ...

jqueryhtmldynamicexternal

Deleting a database table row with a click of a button

I am working with a table structure in my HTML: <table class="table" id="mytable"> <tr> <td>Column 1</td> <td>Column 2</td> <td><button type="submit" class="btn removeButton">Remove</button& ...

javascriptjqueryhtmlajaxflask

Enhancing HTML table interactivity: Updating class of cells upon hover

While attempting to update the class on hover, I noticed that the class changes from 1 to hovering cells However, I want the class to change from 1 to currently hovered cells If moving the mouse from 1 to 10 and then to 2, the currently hovered cells wil ...

jqueryhtmlcss

Ways to increase the spacing between several menus

Need help with spacing between menus Tried using margin left and margin right but it's not working File: _Layout.cshtml <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport&quo ...

htmlcssasp.net-mvcbootstrap-4

Utilizing Bootstrap grid system to create varied column widths for content alignment

Looking to create a page with multiple entries that include text descriptions and associated icons of varying sizes, aligned neatly. (For simplicity, using letters "i" and "w" as placeholders for icons.) For wider screens, the setup should feature a grid ...

csscss-gridbootstrap-5

Picture hidden beyond the words

I am trying to achieve a layout where an image is displayed behind an H1 tag, with the width of the image matching the width of the text. Here is my code: <div style="display: inline;"> <img src="http://img585.imageshack.us/img585/3989/m744. ...

htmlcsscss-position

Having Trouble with Displaying Bootstrap Popover

I have recently started using Bootstrap, and I am attempting to create a popover that appears when a button is clicked. Despite double-checking my initialization of Bootstrap and the popover element, the popup does not show up when I click the button. Whe ...

javascripthtmljquerycssbootstrap-4