Position images on the left and right sides for optimal alignment

After searching on SO and not finding a solution, I need help with listing images in both the left and right columns. The images will vary in size and I'm unsure if my current approach is correct. Here is an excerpt from my HTML file:

<div class="six">
        <ul><img class="left" src=""  width=250/></ul>
        <ul><img class="left" src=""  width=250/></ul>
        <ul><img class="left" src=""  width=250/></ul>

            <div align="center">
                <h1>Pictures</h1>
                <input type="text" id="gif">
                <button id="sbmt">Submit</button>
                <img src=""  width=250/>
            <div>

        <ul><img  class="right" src=""  width=250/></ul>
        <ul><img  class="right" src=""  width=250/></ul>
        <ul><img  class="right" src=""  width=250/></ul>
    </div>

The CSS styling for the images is as follows:

.left{
    align-content: left;
    width:fit-content
  }

.right{
    align-content: right;
    width: fit-content;
}

I have attempted to arrange the images in the layout shown above, but it seems like there might be an error in my code. Despite trying various techniques found on SO, I haven't been able to make it work.

https://i.sstatic.net/APTrm.png

Answer №1

I suggest utilizing flexbox for this particular layout. With flexbox, you can easily arrange your images within each of the six divs in a responsive manner:

.flex-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

.flex-row {
    flex-direction: row;
    display: flex;
    align-items: center;
    text-align: center;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 200px;
    width: 500px;
}
<div class="flex-body">
  <div class="flex-column">
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
  </div>
  <div class="flex-row">
    <div style="background: #fff;">
      <h1>Pictures</h1>
        <input type="text" id="gif">
        <button id="sbmt">Submit</button>
        <img src="" width="250px"/>
    </div>
  </div>
  <div class="flex-column">
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
    <div style="background: #555;"><!-- Image here --></div>
  </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

My Bootstrap/Flexbox layout is not behaving as anticipated. Can anyone identify any issues in my code?

I'm currently working on a MVC website that features a login/signup form. I have been trying to utilize bootstrap to format the forms. My main goal is to center the entire form on the screen, but so far I have only been successful in centering it on t ...

Troubleshooting the Inline-Block Problem with Jquery Image Bubble Display

Recently, I've been exploring ways to eliminate the padding that is creating space between images before they align correctly. The culprit causing the padding seems to be the display: inline-block property. While it was suggested to have all the li t ...

How can I use JavaScript to retrieve information from a different webpage?

I am trying to extract data from another webpage using JavaScript, jQuery, or Ajax without using PHP. I came across a helpful example on Stack Overflow (link here). However, when I implement these codes in my index.html file, it doesn't seem to work. ...

Divide Footer Information into Two Sections: Left and Right

<footer> <div class="copyrights-left"> <p>&copy 2015. <a style="color: #fff;" href="index.html">Free Xbox Live Gold Membership and Free Xbox Live Gold Codes</a>. All rights reserved.</p></div> <div class="co ...

Align the logo in the center of the navbar with items placed on either side

Looking for a way to center my brand logo within my navbar with menu items positioned around it? Preferably without the use of javascript? I've tried different methods, including adjusting the Bootstrap navbar styling, but haven't found a perfect ...

Can I only highlight the ui-icon when active on a button, instead of the entire button? Specifically related to jQuery Mobile

I am working on a project that involves a footer and navbar containing buttons with icons and text. My goal is to make the icon and text highlight individually when selected, rather than the entire button. Can jQuery Mobile help achieve this effect? Here ...

Tips on Including Static Header and Footer in Multiple HTML Pages

What is the best way to reuse a header and footer on multiple HTML pages without repeating code? I have 5 HTML pages that all need to include the same header and footer elements. How can I efficiently reuse these components across all pages? ...

What is the correct method for successfully incorporating Vue Router through CDN to enable the functionality of history mode?

I insert scripts into an html document in the following way: <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> After adding ...

What is the syntax for using escape characters in Vue?

Looking to create a website similar to CodePen? I have developed a library of assets including buttons, cards, and effects, all built using vue.js. Each asset includes HTML, CSS, and sometimes JS code. In my vanilla JS version, I formatted the code using e ...

JavaScript - Hover function not functioning properly

Having some difficulty with the .hover() function I am fetching dribbble shots that are displayed on page load. However, I am experiencing issues when trying to add a class via hover on these shots. Interestingly, the hover functionality works perfectly ...

Branding image from Bootstrap overlapped with a container situated below the navigation bar

I'm having trouble adding a 400 x 100 png logo as a Navbar Brand image in Bootstrap 5. The logo is appearing too large, and even when I try to resize it, it still overlaps the black container and text input box below the Navbar in desktop view. On mob ...

How can you stop the inspect element tool from affecting a specific element?

Is there a method in Chrome to make inspect element ignore a specific element? I frequently need to add an overlay to the entire site (for development purposes) but find that my workflow is hindered because "inspect element" always seems to target that to ...

Fluid container with two columns using Bootstrap 3's container layout

I am currently working on designing a container with a two-column layout using the container-fluid class for background color and image requirements. Inside this container, I have included a container class to ensure that the content aligns properly with n ...

Alter the size of HTML text using a button command

Hello everyone! I recently developed a basic app that showcases an HTML file in a web view. The HTML file is located in the main bundle. I am seeking advice on how to implement functionality that allows users to adjust the font size of the HTML file using ...

Is there a way to effectively utilize Twitter Bootstrap classes such as "row" and "span(X)" specifically for @media print?

Currently, I am facing the challenge of printing web pages on my website and I am seeking advice on how to effectively utilize the row and spanX Bootstrap classes to better manage the content displayed on the printed page. For instance: <div class= ...

php The header functionality is enabled, but there are errors present

After attempting to redirect to the index page upon logging in with an ajax button, I encountered a strange issue. Instead of being redirected to index.php, the header is not functioning properly and I simply receive the HTML code of index.php within my lo ...

Retrieve HTML content from an AJAX request and stylize it

In the Laravel project scenario, customers have the ability to choose a date using a datepicker. Once a date is selected, the available times are displayed to the customer. To achieve this functionality, I utilized Ajax to send the selected date to the dat ...

Replicating the functionality of one class to another class in Twitter Bootstrap

In the Twitter-bootstrap framework, it searches for the active class within an li element to determine which navigation element should be highlighted. However, I am using django-cms, which by default uses a selected class to indicate the same thing (i.e. ...

The grid image is refusing to fall into formation

I have been attempting to align the image in section-1 to the right side, but for some reason, it's not cooperating. I initially tried using flex-box, but I want the image to remain fixed on the right side of the screen without any movement. Floats ca ...

Listener of events that is modifying the incorrect label

Here's a JSfiddle link for you to check out. JS fiddle I am currently attempting to build a quiz using JavaScript, where the questions and answers will be sourced from JSON data. checkbox.addEventListener('change', function() { i ...