What is the best way to showcase columns next to each other using Flexbox or DIV?

I am in the process of updating an old HTML website with the following layout:

body {
    font-family: Verdana, sans-serif;
    font-size: 14px;
    background-color: #FFF;
}

table {
    background-color: #FFF;
    width: 400px;
}

td, tr {
    border: 1px solid;
}

td img {
    width: 190px;
}

td img:after {
    content: "Image for illustration purposes only";
    font-weight: 300;
}
<h1>Stock list</h1>
<table>
    <tr>
        <td><img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg"></td>
        <td><b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b></td>
    </tr>
    <tr>
        <td><img src="https://live.staticflickr.com/3088/3127519858_8b75af8af5_z.jpg"></td>
        <td><b>1999 NISSAN MAXIMA 3.0 V6 GXE 4dr</b> blue <b>£500</b></td>
    </tr>
    <tr>
        <td><img src="https://live.staticflickr.com/1276/919479405_86966cd5ec_o.jpg"></td>
        <td><b>1983 CHRYSLER E-CLASS 2.2 4dr</b> white, classic car <b>£3290</b></td>
    </tr>
</table>

Note that the after pseudo-selector did not display the text.

This is the design I am striving to achieve (with a white background):

Advertisement design from magazine

I am familiar with using column-gap for column spacing.

How can I accomplish this using DIV and either Flexbox or Grid?

Thus far, I have attempted:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
}

div.autota {
    display: grid;
    width: 320px;
    border: 2px solid;
    columns: 2;
    margin-bottom: 15px;
}

div.autota img {
    height: 90px;
}
<div class="autota">
    <img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg"></td>
            <b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b>
        </div>
        <div class="autota"><img src="https://live.staticflickr.com/3088/3127519858_8b75af8af5_z.jpg">
    <b>1999 NISSAN MAXIMA 3.0 V6 GXE 4dr</b> blue <b>£500</b>
        </div>
        <div class="autota">
    <img src="https://live.staticflickr.com/1276/919479405_86966cd5ec_o.jpg">
            <b>1983 CHRYSLER E-CLASS 2.2 4dr</b> white, classic car <b>£3290</b></div>

However, it has not quite matched the design of the linked image.

htmlcss

Answer №1

To achieve a responsive layout, it is recommended to float the divs to the left and use percentage width. Utilizing a CSS framework like Bootstrap can streamline the process without reinventing the wheel.

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
}

div.autota {
    display: grid;
    width: 320px;
    border: 2px solid;
    columns: 2;
    margin-bottom: 15px;
    float: left;
}

div.autota img {
    height: 90px;
}
.clear {
    clear: both;
}
<div class="autota">
    <img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg"></td>
    <b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b>
</div>

<div class="autota"><img src="https://live.staticflickr.com/3088/3127519858_8b75af8af5_z.jpg">
    <b>1999 NISSAN MAXIMA 3.0 V6 GXE 4dr</b> blue <b>£500</b>
</div>

<div class="autota">
    <img src="https://live.staticflickr.com/1276/919479405_86966cd5ec_o.jpg">
    <b>1983 CHRYSLER E-CLASS 2.2 4dr</b> white, classic car <b>£3290</b></div>
    <br class="clear">

Answer №2

This is an example of how your HTML content could be structured:

<div class="grid-container">
   <div class="grid-item">
     <div class="autota">
        <img src="https://live.staticflickr.com/622/20721274966_b37363d59c_b.jpg"></td>
        <b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b>
     </div>
   </div>

   <div class="grid-item">
      Repeat the above structure for all items in your grid
   </div>
</div>

After setting up your HTML, you can style it using CSS:

.grid-container {
   display: grid;
}

You can further customize the layout of your grid by adding different styles. Check out this resource for more options: CSS Grid Layout Module

Answer №3

To achieve a similar layout using Flexbox, you can implement the following:

<table>
    <tr>
        <td><img src="my_image"></td>
        <td><b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b></td>
    </tr>
    ...
</table>

Transform it into something like this:

<div class="container">
    <div class="row">
        <div class="col"><img src="my_image"></div>
        <div><b>2014 FORD FOCUS 1.0 TITANIUM 5dr</b> silver <b>£6999</b></div>
    </div>
    ...
</div>

Regarding your CSS styling for this setup:

.container{
    display: flex;
    flex-direction: col;
    /* ... your styles */
}

.row{
    display: flex;
    flex-direction: row;
    width: 100%;
    /* ... your styles */
}

.col{
    width: 50%;
    /* ... your styles */
}

That's pretty much all you need. No external libraries required.

Alternatively, as mentioned by you, achieving this layout can be even simpler with CSS Grid.

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

Managing Variants in SCSS with BEM Approach: A Comprehensive Guide

Trying to solve a frustrating issue with BEM can be quite the challenge. I currently use the BEM methodology for developing UI elements in my application. For example: <div class="card"> <h2 class="card__title">S ...

htmlcsssassbem

Ways to determine the presence of data in a web browser

I have a code snippet that displays each item in a separate column on the browser. What I want to achieve is to have another page where, upon clicking a button, it will check if that specific item is present on the page. The page that displays the item: ...

javascriptjqueryhtmlnode.jsejs

HTML Path Issues

Hello! I am in the process of building my own website, but I have encountered some difficulties with path issues. For some reason, my scripts are not loading when I reference the path. I have created a folder named "js" within my repository and am attemp ...

phphtmlxcodeweb

The navigation bar gets crowded by various elements on the page due to jQuery's sticky feature

Hey there! I'm currently working on a webpage and I must admit, I'm not the most experienced developer. I successfully created a sticky navbar using the jquery plugin sticky.js, which was great. However, I ran into an issue when I added animation ...

jquerycss

When completing a form submission, make sure to eliminate the %5B%5D from the

Whenever I submit a form with multiple checkboxes that share the same name, the resulting URL format is as follows: www.example.com/search.php?myvalue%5B%5D=value1&myvalue%5B%5D=value2 Is there a method to eliminate the %5B%5D in the URL and make it m ...

phphtmlformsurl-rewriting

Creating responsive lines with CSS on top of an image

I would like to add lines on an image using CSS3 and HTML5 Canvas. I came across a tutorial and demo that utilizes an html div: However, when attempting this effect on an image, the line appears outside of the image. How can I ensure that the line is dra ...

cssimagelines

Creating a functional animated accordion with varying heights: a comprehensive guide

I've been working on creating an animated accordion feature that includes a series of clickable headings. When each heading is clicked, it should toggle to reveal or collapse a content panel underneath. The animation involves transitioning the height ...

javascripthtmlcss

Optimizing MS Outlook 365 HTML Tables with VALIGN Alignment

How to Fix Display Issues with Tables in HTML Emails. Struggling to Vertically Align Cells at the Top? Tried this Code in HTML but it didn't work: <TD valign=top> ...

htmloutlookvalign

I can't figure out what's not working with my full-width video cover

I'm having trouble creating a full-width video cover for the header of a website. Can someone help me troubleshoot what I'm doing wrong? Here is a snippet of my code: <section id="home"> <video poster="assets/img/home-bg.png" a ...

htmlcss

Tips for Changing Background Color Beyond Body Tag

When using my demo below on Safari for iOS and scrolling up and down, you'll notice that you can scroll outside of the body until removing your finger from the touchscreen. The background color outside of the body is white. Is there a way to change th ...

ioscssmobilebackground

Creating a visually appealing multi-bar chart in AngularJS: Tips for effectively presenting data

Imagine that I have the JSON data below: [ { month: "Jan", cost: 80, energy: 90 }, { month: "Feb", cost: 50, energy: 80 }, { month: ...

javascripthtmlcssangularjs

Transform a button to function like a checkbox in Knockout JS

Essentially, I have implemented a feature on my website where a button changes its color from green to grey and vice versa when clicked, giving the illusion of turning on and off. Below is the JavaScript and HTML code for this button: <script> $(&ap ...

javascriptjqueryhtmlknockout.js

what is the best way to showcase a nested ordered list with varying list-style-types using ckeditor 4?

Dealing with a legacy application that features CKEDITOR 4 integration has presented me with a challenge involving the display of a nested ordered list. The issue arose when a user added an ordered list using the bullet list plugin. I encourage you to tak ...

javascripthtmljquerycssckeditor

Exploring the capabilities of React Native, I experimented with utilizing flexbox to align two

When using the code below <View style={{flexDirection: "row", justifyContent: "space-between"}}> <View> <Text style={{fontSize: 50}}>{hours}</Text> <Text style={{alignSelf: "flex-end"}}>h</Text> <Text s ...

cssreactjsreact-nativeflexbox

Combine all the HTML, JavaScript, and CSS files into a single index.html file

So here's the situation - I am utilizing a C# console application to convert four XML files into an HTML document. This particular document will be circulated among a specific group of individuals and is not intended to be hosted or used as a web app; ...

javascriptc#htmlcsswebpack

Implementing various style guidelines for distinct elements

Currently, I am struggling with organizing my unordered list elements to be stacked side by side. The style rule I have been using is as follows: #slide ul,li{ float:left; list-style-type:none; } Now, I am attempting to introduce another unordered list t ...

htmlcsscss-selectorshtml-lists

Creating a form in PHP/HTML with a variety of selectable options

Here is my PHP and HTML code: $damt2 = isset($_POST['damt2']) ? $_POST['damt2'] : 200; $dateinfo2 = json_decode(file_get_contents($_SESSION['base_path'] . 'dl.dict'), true); arsort($dateinfo2); // Sort an array in r ...

phphtml

Angular 6 issue: Bootstrap 4 carousel indicators not responsive to clicks

I am currently working on incorporating a Bootstrap 4 carousel into my application, but I seem to be encountering issues with the indicators. Ideally, clicking on any of them should navigate you to the corresponding photo, similar to this example: https:// ...

angularhtmlbootstrap-4

Adjust the appearance of primeng's PanelMenu component

I've been attempting to customize the appearance of the PanelMenu component So far, I've successfully changed the overall background color. https://i.sstatic.net/MGIia.png My goal is to set the main menu items to white and the submenus to blac ...

cssangularprimeng

What is the reason for my HTML elements inheriting the opacity of their parent elements?

After inserting an image tag into my HTML document, I noticed that it was inheriting the opacity from the parent div element. Despite multiple attempts to adjust this, I have been unsuccessful. Here is an example: <div style="opacity: 0.7"> <img ...

htmlcss