Creating a grid layout with images encapsulated within a div using HTML

I am struggling to create a grid of images with padding between them inside the main_block div. The issue I'm facing is that I can't get the images to align next to each other using inline block or break them with a
because they go in line instead. I attempted to make a new div for these images, but then I couldn't resize the pictures nor give them padding. Making the images resizable didn't yield any results either; it seems like something is overriding their size. The pictures are stacking on top of each other, and I'm aiming to build a grid. Thanks in advance for any assistance! This would be the ideal solution.

Here's the fiddle https://jsfiddle.net/q2cr9ttL/1/

 <style> 
 body {
   margin: 0;
   padding: 0;
 }
 
 #header {
   background-color: #ff6600;
   color: white;
   text-align: left;
   padding: 2px;
 }
 
 #nav {
   line-height: 30px;
   background-color: #fff000;
   height: 350px;
   width: 125px;
   float: left;
   padding: 5px;
 }
 
 #section {
   width: 350px;
   float: left;
   padding: 10px;
 }
 
 #footer {
   background-color: #737373;
   color: white;
   clear: both;
   text-align: center;
 }
 
 #container {
   margin: auto;
   width: 900px;
   text-align: left;
   overflow: hidden;
 }
 
 .inner_block {
   display: inline-block;
   text-align: center;
   width: 350px;
   height: 200px;
 }
 

 .main_block {
   text-align: center;
   width: 750px;
 }
 

  .grid_block {
   display: inline-block;
   text-align: center;
   width: 29%px;
   height:100px;
 }
 
 </style>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />

<body>
  <div id="container">
    <!---container--->
    <div id="header">
      <h1>JORDAS</h1>

    </div>
    <!--header-->

    <div id="nav">
      <a href="index.html">Etusivu</a>
      <br>
      <a href="teltat.html">Teltat</a>
      <br>
      <a href="page2.html">Palvelut</a>
      <br>
      <a href="Yhteystiedot.html">Yhteistiedot</a>
      <br>
    </div>

    <div id="section">


   <div class="main_block">

    <div class="grid_block">
        <img src=Grafik/basictalt.png>
    </div>

    <div class="grid_block">
        <img src=Grafik/basictalt.png >
    </div>    

 <div class="grid_block">

        <img src=Grafik/basictalt.png>
    </div>
  

</div><!--mainblock-->

    </div>

    <div id="footer">
      <h3>POP-UP TELTTOJEN YKKÖNEN </h3>
    </div>
    <!--footer-->
  </div>
  <!--container-->
</body>

Answer №1

To achieve the desired layout, you can utilize the flex display property.

Make sure to add appropriate prefixes for optimal cross-browser compatibility.

* {
  box-sizing: border-box;
}

.main_block {
  display: flex;
  flex-wrap: wrap;
}

.grid_block {
  width: 33%;
  padding: 1.4em
}

.grid_block img {
  max-width: 100%
}


/* CUSTOM STYLES */
body {
  margin: 0;
  padding: 0;
}

#header {
  background-color: #ff6600;
  color: white;
  text-align: left;
  padding: 2px;
}

#nav {
  line-height: 30px;
  background-color: #fff000;
  height: 350px;
  width: 125px;
  float: left;
  padding: 5px;
}

#section {
  width: 350px;
  float: left;
  padding: 10px;
}

#footer {
  background-color: #737373;
  color: white;
  clear: both;
  text-align: center;
}

#container {
  margin: auto;
  width: 900px;
  text-align: left;
  overflow: hidden;
}

.inner_block {
  display: inline-block;
  text-align: center;
  width: 350px;
  height: 200px;
}

.main_block {
  text-align: center;
  width: 750px;
}

.grid_block {
  display: inline-block;
  text-align: center;
  width: 29%px;
  height: 100px;
}
 <div id="container">
    <!---container--->
    <div id="header">
      <h1>JORDAS</h1>

    </div>
    <!--header-->

    <div id="nav">
      <a href="index.html">Home</a>
      <br>
      <a href="tents.html">Tents</a>
      <br>
      <a href="page2.html">Services</a>
      <br>
      <a href="contact.html">Contact</a>
      <br>
    </div>

    <div id="section">


   <div class="main_block">

    <div class="grid_block">
        <img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
    </div>

    <div class="grid_block">
        <img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
    </div>    

 <div class="grid_block">

        <img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
    </div>
  

</div><!--mainblock-->

    </div>

    <div id="footer">
      <h3>TOP RATED POP-UP TENTS </h3>
    </div>
    <!--footer-->
  </div>
  <!--container-->

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

Adjusting the dimensions of a button: What to expect

I'm currently working on a toggle switch that I want to make responsive for future resizing. The toggle switch includes a red square (for demonstration purposes), but I've encountered an issue where the red square stretches and changes its dimens ...

Incorporating the parent object into a nested JavaScript function

I have come across similar questions, but my situation seems unique to me. I have simplified my code and turned one line into a comment, but the core concept remains unchanged... function myFunction(options) { var button; options.widgets.forEach(f ...

Font rendering issue in Chrome extension

I have been diligently following various tutorials on incorporating a webfont into my Chrome extension, but unfortunately, none of them seem to be working for me. Despite all my efforts, the font remains unchanged and still appears as the default ugly font ...

Create stunning HTML emails by incorporating a transparent background color behind images and text

Is there a way to add text on a transparent background layer placed over an image without using the background-image property? In my case, I am working on an HTML Emailer and must utilize the img tag instead. Any suggestions on how to achieve this? < ...

Updating an HTML value based on the selected option using JavaScript

I'm working on a form that included a select element: <select class="form-control"> <option>10 pc</option><!--1 USD --> <option>20 pc</option><!--2 USD --> <option>50 pc</option><!--3 USD ...

Mastering the art of gracefully transitioning to a fallback option when CSS grid

When it comes to creating a simple grid of squares (3x3 at most, filling in top to bottom left to right), I have encountered challenges with both flexbox and grid. The DOM structure required for each method seems incompatible or too complex to support both ...

Tips on choosing additional (sibling) elements with CSS?

My navbar has the following structure: <ul class="nav navbar-nav"> <li class="nav-item"><a href="#services">Services</a></li> <li class="nav-item"><a href="#work">Work</a></li> <li class ...

Repositioning a jQuery function from inside a plugin

I need assistance with customizing the functionality of a jQuery plugin called AjaxFileUpload. You can find the plugin here: https://github.com/davgothic/AjaxFileUpload The current behavior of the plugin is that it uploads the file as soon as it is select ...

Creating HTML content using Racket

Is there a straightforward method for converting X-expressions to HTML in Racket without using response/xexpr? It appears that this function is mainly intended for serving http responses, but I only need to convert Racket lists (or X-expressions) into an ...

Guide to positioning an image at the center across 2 columns using Bootstrap

Looking to create a split screen Bootstrap 4 layout with an image in the center overlapping the two columns. Have successfully set up two equal columns but struggling to position the image to overlap. Have experimented with position:absolute and float:lef ...

Fetching data using HTML script is not possible

Struggling to retrieve data from mongoDB and send it to the client side using res, but I keep getting undefined. Can anyone offer some assistance? Thank you all! //// server.js app.get('/user/show', userController.userList); //// controller cons ...

When the parent element has a fixed position, the child element will no longer maintain its floating property

I'm currently working on a fixed navigation panel that sticks in place while scrolling down. Here is the code I have so far: <header> <a class="logo" href="/">Logo_name</a> <nav> <a href="#">Menu_1</a& ...

Each page is restricted to containing only a single server-side Form tag

I inserted a page with HTML code into a master page and encountered this error when I tried to launch the page. I'm unsure of what I did wrong! <%@ Page Title="" Language="C#" MasterPageFile="~/YourGuruMaster.master" AutoEventWireup="true" Cod ...

I am having issues with Tailwind CSS overriding the responsive padding on my website

I'm currently working on implementing responsive padding for a component. Given that Tailwind CSS follows a mobile-first approach, I have set the mobile padding to p-3, while screens at "md" and larger widths should use p-5. However, it seems like the ...

Guide to setting up a horizontal button menu and dropdown submenu beneath the navigation bar using Bootstrap 4

How can I design a horizontal button menu with submenus below the navigation bar in Bootstrap 4? Take a look at the image below to see what I'm aiming for: https://i.sstatic.net/j6b8a.png https://i.sstatic.net/rmtrM.png If you have any ideas or su ...

Creating a Dropdown Filter using Vanilla JavaScript

I am currently working on a project for one of my college courses, which involves creating a dropdown list filter using pure JavaScript to filter a grid of images in HTML/CSS. The main challenge I am facing is that this filter needs to be able to work with ...

Concealed Separator for Text Elements in HTML

I am in search of a method to distinguish certain specific strings within HTML code. Although I can recognize the desired strings, they may also appear as part of longer strings throughout the document. In order to locate them, I currently insert a special ...

"Exciting Changes in Color According to the Active State of vue-route-link

I am trying to find a way to customize the CSS based on whether a link is exact or active. Essentially, when a user clicks on a menu item, I want the underline to change depending on whether the link is an active router-link. Although I was able to accompl ...

The functionality of the Bootstrap tabbed pane is not functioning correctly

I am currently in the process of creating a modal tabbed pane in bootstrap following the instructions provided in this guide. You can view the code and functionality on this fiddle. $(document).on("click","#tabs a",function(event) { alert("!!!"); ...

Having trouble with Jquery's Scroll to Div feature?

When I click on the image (class = 'scrollTo'), I want the page to scroll down to the next div (second-container). I've tried searching for a solution but nothing seems to work. Whenever I click, the page just refreshes. Any help would be gr ...