I'm having trouble getting the float left to work properly in my HTML/CSS code

Currently, I am diving into the world of HTML / CSS on my own. After following some tutorials, I have taken the leap to work on my very first project. My goal is to layout three images and three text elements on a single page using CSS.

The desired structure should be as follows:

Text - Image
Image - Text
Text - Image

I attempted to position the images using float: right and float: left accordingly. However, all three images ended up being placed on the right side repeatedly.

Can anyone provide guidance? Thank you in advance.

<div class="Food">
  <div>
    <p class="Foodtext">
      fvjkhfhikvfdhilvdlhifbikfddbuukubfkuvbduhvdjhvdfkuvhukufvhjkdfuubfdkuhvhukvvhukfdubbf
    </p>
  </div>
  <div>
    <img src=speise.jpg alt="Speise" style="float: right">
  </div>
</div>
<h3>Wine</h3>
<div class="Wine">
  <p class="Winetext">
    fhkvbshukveuvbkdfjvbuvfdsfkufbekfbgkrbkfewrrkgbgburfbuehu
  </p>
</div>
<div>
  <img src="wein.jpg" alt="Weinregal" style="float: left">
</div>
</div>
<h3>Music</h3>
<div class="Music">
  <div>
    <p class="Musictext"> vbhuireeehugoreiur8hgeoirorguuhghirruhgfuhkgrhukge</p>
  </div>
  <div>
    <img src="dj.jpg" alt="DJ legt auf" style="float: right">
  </div>
</div>
htmlcss

Answer №1

It seems like you have floated your images within divs on their own, which is reminiscent of trying to move right inside your clothes. Remember that floated images should share the same parent as the content that needs to flow around them.

The solution is simple: just combine the divs. You might even consider placing your images inside the paragraphs.

Additionally, make sure to utilize a reliable editor (or at least validate your HTML code). Doing so will help highlight any structural or semantic errors.

<div class="Food">
  <div>
    <p class="Foodtext">
      Lorem ipsum dolor sit amet...
    </p>
    
    <img src="https://via.placeholder.com/100" alt="Food" style="float: right">
  </div>
</div>

<h3>Wine</h3>

<div class="Wine">
  <p class="Winetext">
    Sed ut perspiciatis unde omnis iste natus error...
  </p>

  <img src="https://via.placeholder.com/100" alt="Wine rack" style="float: left">
</div>

<h3>Music</h3>

<div class="Music">
  <div>
    <p class="Musictext"> Consectetur adipiscing elit...
    </p>
    
    <img src="https://via.placeholder.com/100" alt="DJ spinning" style="float: right">
  </div>
</div>

Answer №2

The reason for this issue is that you are applying styling to the image within a new div container.

Consider using the following code instead:

<div class="Food">
  <div>
    <p class="Foodtext">
      Sample text here
    </p>
  </div>
  <div style="float: right">
    <img src=speise.jpg alt="Speise">
  </div>
</div>
<h3>Wine</h3>
<div class="Wine">
  <p class="Winetext">
    More sample text here
  </p>
</div>
<div style="float: left">
  <img src="wein.jpg" alt="Weinregal">
</div>
</div>
<h3>Music</h3>
<div class="Music">
  <div>
    <p class="Musictext"> Even more sample text here</p>
  </div>
  <div style="float: right">
    <img src="dj.jpg" alt="DJ legt auf">
  </div>
</div>

By implementing these changes and potentially specifying max-width for the divs and adjusting image width, the issue should be resolved!

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

What is the best way to implement a JSON object within an <img> src attribute?

Currently, I am in the process of creating a dynamic Vuetify navigation drawer and I have the intention of storing images in a JSON array. My main inquiry revolves around figuring out if it's feasible to extract the image attribute and incorporate it ...

htmljsonvuetify.js

Changing the color of a placeholder using Javascript: A step-by-step guide

I've been searching online without any luck so far. I'm attempting to change the placeholder color of a text box using JavaScript, but I'm not sure how to go about it. I already have a color picker that changes colors. If my CSS looks somet ...

javascripthtmlcsspseudo-element

Concealing axis lines within the initial circular grid or opting not to include them

Is there a way to incorporate some whitespace within the center circle of the radar chart? I'm aiming for the axis to commence at 1 radius (the initial circular line) or perhaps have the stoke set to 0 for the primary radius. Any assistance would be g ...

javascriptcssreactjsd3.js

What is the best way to place a button within a line of text

I am trying to achieve a layout similar to this: -------------------button------------------ I can add text inside the line, but it doesn't look good when I add a button. Any suggestions on how I can improve this? ...

htmlcss

Merge the values of two select tags into a single textbox

There are two select Tags along with a text box included. <select name="select1"> <option>1</option> <option>2</option> </select> <select name="select2"> <option>1</option> <option>2 ...

javascripthtml

Using jQuery to replace the content of a div with a delay?

I am attempting to utilize jQuery to create a fade effect on an element, replace its innerHTML content, and then fade it back in once the new content has been added. I have successfully managed to replace the element's content using the .html() method ...

javascriptjqueryhtmlcssinnerhtml

Is there a way to automatically send users to a different PHP file once they click "submit"?

I need to redirect to a different php file named index2.php. The username and password values are already set as follows: Username=sid, Password=yeaoklogin. When the user clicks on the Login button, they should be redirected to a page called index2.php. ...

javascriptphphtml

Laravel issues with displaying data in a 'foreach' loop

I encountered a quirky issue while working with Laravel 5.2. I have a chunk of text that I'm attempting to display using some explode functions. The strange part is, Laravel is rendering it oddly by adding incorrect ':' before the end of the ...

phphtmllaravelforeachlaravel-5

Issue occurs when a circle element is not following a div element on mouse

Currently, I have implemented some jQuery code that instructs a div named small-circle to track my cursor movement. I discovered how to accomplish this by referencing a thread on stack overflow. I made slight modifications to the script to suit my specifi ...

javascriptjqueryhtmlcss

What might be causing Flex not to function properly on my personalized landing page?

I attempted to create a basic landing page featuring an image background with a logo, button, and a row of 4 images displayed side by side using Flex. However, for some reason, the Flex is not functioning properly for the row of images. Here is the code s ...

htmlcssflexbox

Extending the length of the list items and their contents

Take a look at this website. I'm struggling with expanding the submenu list items in IE7. It seems that when you hover over one of the LIs under Restaurants, the green does not fill the entire line. I attempted using {width: 100%}, but it did not sol ...

htmlcsswidth

Automatically activate a button when it comes into view while scrolling

I am currently working in Joomla, which makes it challenging to create a fiddle, but here is the concept: My website displays a mosaic grid of 12 articles upon loading, along with a 'Load More' button. When this button is clicked, an additional ...

javascriptjqueryhtml

Hover effect that smoothly transitions to a background image appearing

I want to achieve a smooth fadeIn effect for the background image of a div. Currently, I have a function that displays the background image when hovering over the relevant div, but the transition is too abrupt. I would like it to fade in and out instead of ...

jqueryhtmlfadein

JavaScript code to retrieve an image from an <img> tag's source URL that only allows a single request and is tainted due to cross-origin restrictions

I have an image displayed in the HTML DOM. https://i.stack.imgur.com/oRgvF.png This particular image (the one with a green border) is contained within an img tag and has a URL as its source. I attempted to fetch this image using the fetch method, but enc ...

javascriptpythonhtmlseleniumcanvas

Revamping JSP Content with DOJO AJAX: A Comprehensive Guide

I am currently utilizing the Dojo library and I need assistance with replacing all the content of my jsp/html file. I am attempting to dynamically reload my page whenever new data is updated. Below is the code snippet from my dojo implementation: functio ...

javahtmlajaxjspdojo

Elements displaying outside of block 'a' tag

I have a set of <a> elements that are styled with display:block. These contain various nested <divs>, for example: <a href="#" class="sliderframe"> <div class="container-caption"> <div class="slider ...

htmlcss

Unlocking secure content with Ajax

Trying to access a webservice or webpage solely through ajax, as it is the only allowed method for some reason. The webservice is secured with corporate SSO. When requesting webpage X for the first time, you are redirected to login page Y, outside of the a ...

javascripthtmlajax

In JavaScript, unchecking a radio button results in all options becoming uncheckable

I have a pure CSS accordion and I want to enhance it with some JavaScript functionality for users who have JavaScript enabled. The CSS accordion currently utilizes the :checked pseudo-class. The new feature I am looking to add is: if a button that is alre ...

javascriptcssradio-buttonaccordion

Issue with the alignment of DIV container due to spacing issues

In the screenshot below, there is a DIV container with padding of 15px on the left and right. However, the contents are appearing spaced out downwards for some reason... Other than the left & right padding, no other styling seems to be affecting it. Adjus ...

csshtmlinputspacing

Efficiently centering content in a grid layout using automatic fit repetition for optimized responsiveness

I've implemented a responsive grid where each item has its own hidden details section that is revealed upon clicking the item. The structure of the HTML/CSS setup is as follows: <div class="grid"> <div class="item"> ...

javascripthtmlcssflexboxcss-grid