The alignment of image and text next to each other is not functioning as intended

Question

The alignment of image and text next to each other is not functioning as intended

I've been attempting to display an image and text next to each other, but I'm encountering some issues. The current output looks like the figure below: https://i.stack.imgur.com/WxxrS.jpg

The desired layout is as shown in the following link:

https://i.stack.imgur.com/IKNbq.jpg

Here is the code snippet I am using:

<div class="form widget widget-large">

    <form method="POST">
        @csrf

        <img src="https://www.pngitem.com/pimgs/m/325-3256412_buy-shopping-cart-add-product-ecommerce-icon-png.png"
            style="width : 30%; display: inline-block; vertical-align: top;">

        <div>
            <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
        </div>
        <div>
            <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
        </div>
        <div>
            <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
        </div>
        <div>
            <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
        </div>

    </form>

</div>

Despite following tutorials on aligning images and text side by side, it's still not working as expected. Can anyone point out what might be causing this issue?

Appreciate your help in advance.

html css image text

Answer 1

Answer №1

To enhance the current code, incorporating inline-block on the divs with the name: elements is a simple solution. By utilizing this CSS property, you can instruct the browser to maintain elements on the same line rather than starting a new line automatically.

Below is an example snippet illustrating this concept:

<div class="form widget widget-large">

    <form method="POST">
        @csrf

        <img src="https://www.pngitem.com/pimgs/m/325-3256412_buy-shopping-cart-add-product-ecommerce-icon-png.png"
            style="width : 30%; display: inline-block; vertical-align: top;">

        <div style="display:inline-block;">
            <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
        </div>
        <div style="display:inline-block;">
            <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
        </div>
        <div style="display:inline-block;">
            <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
        </div>
        <div style="display:inline-block;">
            <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
        </div>

    </form>

</div>

While this adjustment addresses the immediate formatting concern, additional modifications may be needed. Additionally, the presence of label Name suggests the need for an associated input element, which could potentially be added in future iterations.

Answer 2

To enhance the current code, incorporating inline-block on the divs with the name: elements is a simple solution. By utilizing this CSS property, you can instruct the browser to maintain elements on the same line rather than starting a new line automatically.

Below is an example snippet illustrating this concept:

<div class="form widget widget-large">

    <form method="POST">
        @csrf

        <img src="https://www.pngitem.com/pimgs/m/325-3256412_buy-shopping-cart-add-product-ecommerce-icon-png.png"
            style="width : 30%; display: inline-block; vertical-align: top;">

        <div style="display:inline-block;">
            <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
        </div>
        <div style="display:inline-block;">
            <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
        </div>
        <div style="display:inline-block;">
            <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
        </div>
        <div style="display:inline-block;">
            <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
        </div>

    </form>

</div>

While this adjustment addresses the immediate formatting concern, additional modifications may be needed. Additionally, the presence of label Name suggests the need for an associated input element, which could potentially be added in future iterations.

Answer 3

Answer №2

If you want to organize your content into two columns, consider splitting the areas left and right. You can achieve this by setting the left column with display:inline-block; and float:left. These CSS properties will align the column to the left, allowing space for another column on the right.

Once you have created the left and right columns, remember to apply these styles to the right column as well. Since the element is a block-level element, using display:inline-block; will prevent it from extending across the entire row.

.left, .right {
  display:inline-block;
  float:left;
  width: 50%;
}

img {
  width:100%;
  height:auto;
  display: inline-block; 
  vertical-align: top;
}

<div class="form widget widget-large">

    <form method="POST">
        <div class='left'>
        <img src="https://www.pngitem.com/pimgs/m/325-3256412_buy-shopping-cart-add-product-ecommerce-icon-png.png"
            >
        </div>

        <div class='right'>
          <div>
              <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
          </div>
          <div>
              <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
          </div>
          <div>
              <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
          </div>
          <div>
              <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
          </div>
        </div>

    </form>

</div>

Another Approach

Instead of manually handling layout with CSS, consider utilizing grid systems like Bootstrap's grid system. It simplifies creating multiple columns and offers flexibility in managing layouts.

Answer 4

If you want to organize your content into two columns, consider splitting the areas left and right. You can achieve this by setting the left column with display:inline-block; and float:left. These CSS properties will align the column to the left, allowing space for another column on the right.

Once you have created the left and right columns, remember to apply these styles to the right column as well. Since the element is a block-level element, using display:inline-block; will prevent it from extending across the entire row.

.left, .right {
  display:inline-block;
  float:left;
  width: 50%;
}

img {
  width:100%;
  height:auto;
  display: inline-block; 
  vertical-align: top;
}

<div class="form widget widget-large">

    <form method="POST">
        <div class='left'>
        <img src="https://www.pngitem.com/pimgs/m/325-3256412_buy-shopping-cart-add-product-ecommerce-icon-png.png"
            >
        </div>

        <div class='right'>
          <div>
              <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
          </div>
          <div>
              <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
          </div>
          <div>
              <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
          </div>
          <div>
              <label for="Name" class="widget-title" style="width: 200px; display: inline-block;">Name:</label>
          </div>
        </div>

    </form>

</div>

Another Approach

Instead of manually handling layout with CSS, consider utilizing grid systems like Bootstrap's grid system. It simplifies creating multiple columns and offers flexibility in managing layouts.

The alignment of image and text next to each other is not functioning as intended

Answer №1

Answer №2

Similar questions

Basic form submission versus using an Ajax loader mechanism

Attempting to design a uniform question mark enclosed within a circle using CSS

Unable to retrieve the parent element using jQuery

How can I prevent scrolling while a loader is displayed during page loading?

Angular is sending a parameter with a null value, which is not supposed to happen

IE9 causing trouble with CSS vertical alignment

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

error in URI (not a valid URI):

Ways to emphasize the currently active tabs on a navigation bar

Is it possible to dynamically change HTML content by utilizing a JSON file?

There seems to be a clash between Modal Semantic UI React and Bootstrap causing issues

The grid is intended to be positioned horizontally, but is currently being shown vertically

Is your animation glitching due to axis restrictions?

Is it possible to update the value of an element using JavaScript?

The name 'Landbot' cannot be located. Have you meant to type '_landbot' instead?

Vuetify's scrolling list feature allows for smooth navigation through a list

Fade in/out overlay effect when clicking on a content block

Improving Page Load Speed with HTML Caching: Strategies for Enhancing Performance when over half of the data transferred is for navigation menus

A problem encountered in specific JavaScript code

Tips for effectively utilizing the Angular ngIf directive for toggling the visibility of elements