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

Having trouble with moving the svg:svg element?

Creating HTML tabs using jQuery with input[type="radio"] tutorial for beginners

Show the json data on a PHP table

Having trouble with the CSS drop down menu in Internet Explorer 10?

Tips for dividing the WordPress header navigation horizontally using separate PHP files

When using the Column width property in React Material UI, it may not automatically expand

When a user chooses an item, the ui-select dropdown appears hidden behind additional fields on the screen

Angular package that includes horizontal scrolling functionality with arrow buttons

Selecting Messages in a Scala Play Application

Retrieve JSON data by making a POST request to a website's API

The oversized image is refusing to scale down to fit within the confines of the CSS grid container

What is the best way to divide an image into smaller rectangles for use on iPhone, Android, or Rails platforms

Issue with CSS pseudo-elements :before and :after in Internet Explorer

Execution of Ajax call fails to occur synchronously

What's the reason why Angular stops flickering with the use of "/" in href?

Updating an SVG after dynamically adding a group with javascript: a step-by-step guide

Unable to get compatibility mode IE to work as intended

Achieve center alignment for two column divs without altering the HTML code using only CSS

What is the best way to bring the global stylesheet into a Vue component?

Guide on adjusting the CSS styling of elements in real-time from the backend using a user customization panel to modify the appearance of various web pages