Innovative design transformation using HTML and CSS tables

I am designing my website's homepage and I want to showcase 12 equally sized pictures in a 3 by 4 grid layout. I prefer not to use tables because my CSS has media queries that adjust the layout based on screen size. However, if there is a way to achieve the same with tables, I am open to it. The challenge I am facing is when I only have 11 pictures, the last one appears off-centered.

Below is the code for the first 3 divs (the rest follow a similar structure):

.divThumb1{
    float: left;
    width: 31%;
    max-width: 288px;
    margin: 0%;
    position: relative;
    margin-top: 15px;
}
.divThumb2{
    margin:0 auto;
    display:inline-block;
    width: 31%;
    max-width: 288px;
    margin: 0%;
    position: relative;
    margin-top: 15px;
}
.divThumb3{
    float: right;
    width: 31%;
    max-width: 288px;
    margin: 0%;
    position: relative;
    margin-top: 15px;
}

If you have any suggestions or need more information, please feel free to reach out!

htmlcsscss-tables

Answer №1

To create a responsive layout like this, consider utilizing the grid system provided by Bootstrap, a widely-used CSS framework: http://getbootstrap.com/css/#grid-options

Once Bootstrap is integrated, you can simply use code similar to this:

<div class="row">
   <div class="col-md-4"></div>
   <div class="col-md-4"></div>
   <div class="col-md-4"></div>
   ...
</div>

This should help you achieve your desired layout without having to manually customize each div element. Make sure to explore options like .col-xs-, .col-sm-, .col-md-, and .col-lg- as they are well-documented.

I hope this information proves useful for you.

Answer №2

Check out this awesome responsive image grid with a maximum width. Every image is perfectly centered for your viewing pleasure!

.imageGrid {
  display: block;
  margin: 0 auto;
  max-width: 800px;
  text-align: center;
  font-size: 0;
  line-height: 0;
}

.imageGrid * {
  font-size: 16px;
  line-height: 21px;
}

.imageGrid > img {
  display: inline-block;
  width: 31%;
  margin: 1%;
  background-color: gray;
}
<div class="imageGrid">
  <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
  <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
  <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
  <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
  <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
  <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
  <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
  <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
  <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
  <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
  <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="img"/>
</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

Struggle with creating a responsive Strava Iframe (CSS/HTML)

UPDATE: My ongoing attempts to make the iframe container responsive have been focused on adjusting its size based on the intrinsic ratio of the iframe. Unfortunately, this approach has not fully worked as some elements of the iframe remain fixed in pla ...

htmlcssiframemobileresponsive-design

I am interested in using an image upload box that includes a hidden input field. However, I have encountered issues with the functionality when the input field is hidden. Does anyone have any suggestions on how

I have limited experience and need some assistance with resolving this particular issue. I am looking to create an image upload box that works when clicked on the input field. Thank you in advance. function readURL(input) { if (input.files && ...

javascripthtmlcss

Using Python/Django to strategically escape strings within HTML

My current task involves working with email content that is formatted in html. I have noticed that email addresses are structured similarly to html tags. Is there a method to selectively escape certain strings in html code while leaving others unchanged? ...

htmlpython-3.xdjango

TinyMCE removes the class attribute from the iframe element

I am trying to specify certain iframes by using a class attribute to adjust the width using CSS. The iframes I am working with are google maps embeds, similar to this one: <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0 ...

htmlcsstinymce

Combining Blazor with Bootstrap for seamless form validation

After gaining some experience with Razor, I decided to explore Blazor. However, I encountered a familiar challenge - integrating validation with Bootstrap. The issue lies in the mismatch between Blazor's validation result classes and those of Bootstra ...

cssvalidationbootstrap-4blazor

Unable to save the user's identification in the session

I am in the process of retrieving the user ID of a logged-in user and storing it in the session. This way, when a user submits something, I can include their user ID in the submission to the database. My login page is quite rudimentary, so any guidance wou ...

phphtmlmysqlsession-variables

scrolling element resembling an iPad

Currently in search of a css/js component that resembles iscroll, but one that is compatible with non-webkit browsers as well. To elaborate, I am in need of the following features: Sleek scrollbar Scrollbar that only appears on drag and/or hover Abilit ...

javascripthtmlcssscrollscrollbar

Using Material-UI with ReactJS: Implementing color alternation in Material-UI <Table/>'s <TableRow/>

I am currently utilizing Material-UI's <Table/> component and I would like to alternate row colors between blue and purple. The first row will be blue, the second row will be purple, and so on for every additional row added. How can I dynamical ...

javascripthtmlcssreactjsmaterial-ui

Creating dynamic input fields in a React component allows for a more interactive user

In my current project, I have a div section that includes three input fields and a remove button. The goal is to allow users to dynamically add this div when clicking on the "Add" button, and remove it when clicking on the "Remove" button. Initially, I man ...

javascripthtmlreactjs

Prevent div from moving upward using CSS

Whenever I use the search box, a dropdown list of suggestions appears. However, the searchbox div element keeps moving both up and down. How can I prevent the div from moving upwards? The code snippet below shows a hardcoded unordered list of names for s ...

cssmaterial-ui

Issue: Unspecified Index encountered when making an Ajax call

I'm encountering an issue where I am receiving an "Undefined Index" error while trying to call Ajax. My goal is to post JSON data to the "update.php" page when the submit button is clicked. Essentially, I want to gather the values in textboxes and sen ...

javascriptphpjqueryhtmlajax

Position child divs at the center of the parent div

I am struggling to center 3 child divs inside a parent div that must remain at a width of 100%. Can someone help me figure out how to achieve this? .parent { width: 100%; border: 1px solid blue; } .child { float: left; borde ...

htmlcss

How can I ensure that changes made to a div in ASP.NET remain persistent during postback?

My current setup involves using jquery to toggle a div on and off successfully. However, I am encountering an issue where any changes made are not saved when a postback occurs on the page. Can anyone provide guidance on how to save these changes? Any assis ...

asp.netjqueryajaxhtml

Employing jQuery Mobile Cache Manifest with PHP

Exploring the use of jquery mobile cache manifest, I'm curious to know if it's compatible with Php files as well. Appreciate any insights. ...

phpjavascripthtmljquery-mobile

Troubleshooting jQuery ajax data retrieval issue in Internet Explorer 8

I'm currently utilizing jQuery submit to submit form data and retrieve it. The data is returned via ajax. When the data is received, I want to display the DIV Gallery HTML. To do this: <form action="" method="post" name="view_all" id="view_all" ...

jqueryhtmlajaxinternet-explorer-8find

Attempting to align content in the middle of the page across all web browsers

I need assistance with centering all the content on my website across different screen sizes and browsers. Currently, everything appears off-center and aligned to the left on various screens I have tested. You can view the HTML and CSS code in this link. H ...

htmlcss

What is the best way to position my Bootstrap sidenav on the right side of the page?

Sorry if this is a basic question, but I'm new to this. Currently, the sidebar is on the left side. How can I move it to the right? #sidebar-wrapper { top: 52px; right: -200px; width: 200px; background-color: #27CD70; color: white; posi ...

htmlcsstwitter-bootstrap-3

Unusual display of footer controlled by CSS in certain template pages

I recently made changes to the footer on a template-based website. I noticed that, for some unknown reason, the footer is not appearing at the bottom of the page as it should be. I wonder if the footer functionality is faulty altogether and if I only got ...

htmlcss

Dynamic text overlay on a versatile image

With the help of bootstrap, I've created a mobile-responsive image with overlay text and a button that should be centered on the image. However, the text doesn't stay centered when the screen size is reduced. What it's supposed to look like: ...

htmlcssbootstrap-4

Make an element in jQuery draggable but always within the viewport

My issue is that when I resize the window, the element stays in its position until I start dragging it. Once I drag it and then resize the window again, it doesn't stay within its container. To better illustrate my problem, you can view a demo on Fid ...

javascriptjqueryhtmlcssjquery-ui