The gap separating the three columns in the DIVs structure

Question

The gap separating the three columns in the DIVs structure

Here is an example that I need

The images are being loaded from a MySQL while loop, and I want the spacing between them to be such that the left column and right column touch each side with the middle image centered. Just like in the picture :D

This is my current CSS:

#realisation .box{
    float:left;
    width:286px;
    background:#fff;
    padding:10px;
    margin-right:20px;
    -moz-box-shadow: 1px 2px 2px #ccc;
    -webkit-box-shadow: 1px 2px 2px #ccc;
    box-shadow: 1px 2px 2px #ccc;
}

#realisation .box:last-child{
    margin-right:0px;
}

Here's the loop code:

<div class="box">
    <div><img src="imgs/beta/imgpasrap.jpg" width="286" height="176"/></div>
    <p>Text here</p>
  </div>

It's working perfectly for the first three boxes, but when there are more than that, the display gets messed up. How can I achieve the layout shown in the above picture?

html css css-float

Answer 1

Answer №1

Make sure to set a specific width for the container that holds all the images. (source: http://jsfiddle.net/52TUV/)
(please note: the image styles are only for size maintenance and don't need to be included)

<div id="outer">
    <!-- insert image HTML code here -->
</div>

#outer{
    width: 1000px;
}

Answer 2

Make sure to set a specific width for the container that holds all the images. (source: http://jsfiddle.net/52TUV/)
(please note: the image styles are only for size maintenance and don't need to be included)

<div id="outer">
    <!-- insert image HTML code here -->
</div>

#outer{
    width: 1000px;
}

Answer 3

Answer №2

<div class="classStyle">
    <!-- picture -->
</div>

.classStyle{
    width: 70%;
    height: 70%;
 }

Answer 4

<div class="classStyle">
    <!-- picture -->
</div>

.classStyle{
    width: 70%;
    height: 70%;
 }

Answer 5

Answer №3

Check out this useful resource for creating CSS columns using lists:

Note that the :last-child() selector may not be compatible with all major web browsers.

Answer 6

Check out this useful resource for creating CSS columns using lists:

Note that the :last-child() selector may not be compatible with all major web browsers.

Answer 7

Answer №4

Here is a Code Snippet for creating a layout with product images:

<html>
<head>
<style>
body{
background-color:#CCCCCC;
}
.product_image{
    float:left;
    background:#fff;
    padding:10px;
    margin-right:20px;
    margin-bottom:20px;
    -moz-box-shadow: 1px 2px 2px #ccc;
    -webkit-box-shadow: 1px 2px 2px #ccc;
    box-shadow: 1px 2px 2px #ccc;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<?php for($i=1; $i<=9; $i++){ ?>
<div class="product_image"><img src="image.jpg" /></div>
<?php 
if($i%3==0){
echo '<div class=clear></div>';
}
} ?>
</body>
</html>

You can modify the loop to your preference using a while loop and display only thumbnail images.

Answer 8

Here is a Code Snippet for creating a layout with product images:

<html>
<head>
<style>
body{
background-color:#CCCCCC;
}
.product_image{
    float:left;
    background:#fff;
    padding:10px;
    margin-right:20px;
    margin-bottom:20px;
    -moz-box-shadow: 1px 2px 2px #ccc;
    -webkit-box-shadow: 1px 2px 2px #ccc;
    box-shadow: 1px 2px 2px #ccc;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<?php for($i=1; $i<=9; $i++){ ?>
<div class="product_image"><img src="image.jpg" /></div>
<?php 
if($i%3==0){
echo '<div class=clear></div>';
}
} ?>
</body>
</html>

You can modify the loop to your preference using a while loop and display only thumbnail images.

The gap separating the three columns in the DIVs structure

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What's the best way to use the keyboard's enter key to mark my to-do list

What is the significance of "HandleValidSubmit()" consistently being executed in Blazor?

Is it feasible to execute exe files within a ReactJS environment?

AngularJS: Utilizing bold text to enhance the separation of concerns between controllers and templates

Establishing a boundary by incorporating a variable into a numerical value

Is it possible to add a bottom border without having slanted corners?

ever-evolving background-image with dynamic CSS styling

Tips for creating a dashed border line that animates in a clockwise direction when hovering

What could be causing the issue with Hindi text not displaying properly on Safari?

Enhance Material UI BottomNavigationAction by adding a pseudo-element

Directly within Angular, map the JSON data to an object for easy assignment

Ways to place a background image without using the background-position attribute

Customize the appearance of the date input box in MUI KeyboardDatePicker

Generating a dynamic method for uploading multiple files

What is the best way to keep the navbar contained within the parent div (hero image) no matter the size of the screen?

Form Validation in JavaScript Continues to Submit Form Even When 'False' is Detected

Creating a grid cell that spans the entire grid width

Changing the Background Color of the Toolbar in Ionic

Maintaining my navigation menu as you scroll through the page

Unable to trigger onClick event