Show two rows containing six columns each and make them reduce in size

I am attempting to create a layout with two rows of six columns that will adjust in size as the browser window is resized. The current CSS code I have causes the number of columns to be determined by the image size, resulting in uneven spacing on different screen sizes.

.ngg-albumoverview {
    overflow: hidden;
    margin-top: 1px;
        margin-left: 0px;
    width: 100%;
    clear:both;
    display:block !important;
}

.ngg-album {
    float:left;
    height: 100%;
    padding: 0px;
    margin-bottom: 0px;
    border: 0px solid #fff;

}

/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
    overflow:hidden;
    padding: 0px;
    margin-bottom: 0px;
    border: 0px solid #cccccc;
}

.ngg-album {
    overflow: hidden;
    padding: 0px;
    margin-bottom: 0px;
    border: 0px solid #cccccc;

}

.ngg-albumtitle {
    text-align: left;
    font-weight: bold;
    margin:0px;
    padding:0px;
    font-size: 1.4em;
    margin-bottom: 0px;
}


.ngg-thumbnail {
    float: left;
    margin-bottom: 10px;
    margin-right: 2px;
    text-align: center;
    font-weight:bold;
background-color:#0F0F0F;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px
}


.ngg-thumbnail img {
    background-color:#A9A9A9;
    border:0px solid #1D1D1D;
    display:block;
    margin:4px 0px 4px 5px;
    padding:4px;
    position:relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:200px;
}

.more {
    width: 100%;
    background-color:#0F0F0F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}



.ngg-thumbnail:hover {
    background-color: #333333;
}

.ngg-thumbnail img:hover {
    background-color: #FFFFFF;
}

.more:hover {
    background-color: #333333;
}

.ngg-description {
    text-align: center;
}

After applying the above CSS to .ngg-albumoverview, it successfully displays six columns and resizes them. However, the second image appears below the first one instead of next to it, with the third image positioned beside the first.

columns:100px 6;
-webkit-columns:100px 6; /* Safari and Chrome */
-moz-columns:100px 6; /* Firefox */
cssmultiple-columns

Answer №1

When using CSS columns, the page is divided into sections that flow in the same way as the rest of the page. Your images are positioned like this:

[1][3][5]
[2][4][6]

This layout is due to the natural top-to-bottom flow of a webpage, which expands based on the widths of elements.

If you want your images to be displayed in a different order, such as:

[1][2][3]
[4][5][6]

You will need to replace the columns with a responsive grid. Adjust the widths of your .ngg-thumbnail elements to percentages (including margin, border, and padding), float them left, and apply max-width: 100% and height: auto to .ngg-thumbnail img. Also, make sure to float the parent element of .ngg-thumbnail to maintain document flow.

Don't forget to add clear: left; to the 4th image if the widths don't total 100%, so it starts a new line. You can target the 4th image with:

.ngg-thumbnail img:nth-of-type(4);

For further learning, check out this informative resource on CSS floats.

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

Is it possible to reverse the effects of @media queries for min/max width and height?

I rely on http://www.w3.org/TR/css3-mediaqueries/ to customize my design based on the available viewport size. When I need to adjust the breakpoints, I struggle with negating @media (min-width: 500px), which overlaps with (max-width: 500px). To counter th ...

cssmedia-queriesnegation

The Hover Hover textbox stays in place once clicked on

I have implemented a search bar that displays a textbox when a user hovers over a button. I am looking to modify the code so that the textbox remains visible even after the user has clicked on it. This way, if the user accidentally moves their mouse away f ...

javascriptjqueryhtmlcss

Responsive CSS design that adjusts to fit the content

Struggling to make the wrapper expand with its content... This is the structure: * { padding: 0; margin: 0; } body { background-color: #ccc; background-repeat:repeat; font: Tahoma, Geneva, sans-serif; color: #FFF; } .wrapper { width: 95%; margin: 0 au ...

htmlcsslayoutheight

Is it possible to manipulate elements within an overflow container using JavaScript/jQuery when using the HTML style "overflow:hidden"?

My <div> has a styling of style="overflow:hidden" and the size of the <body> is fixed, intended as a multi-screen display without a user interface. Is there a method to access these "invisible" elements to identify the first one that exceeds t ...

javascriptjqueryhtmlcss

When using flexgrid, be aware that adjacent divs on the same row may shift position when applying floats

Struggling with aligning the divs in a row when floating one of them? Here's a snippet to illustrate the issue: .flex-grid { display: flex; justify-content:space-between; } .flex-grid .rcorners1 { border-radius: 25px; background: green; ...

htmlcssflexbox

Any issues with the color scheme and text size in the main.css file? Seeking solutions!

Image version: https://i.sstatic.net/ExaGb.png I'm encountering some difficulties when trying to update the appearance of my page PrintExtraInfo.aspx. In PrintExtraInfo.aspx: <asp:Table ID="Table1" runat="server"> <asp:TableRow> < ...

htmlcssasp.net

What is causing the label's color to remain the same?

Once the page has loaded, the label color (which reads "enter your name") is supposed to change to red. However, despite the script being in place, the color remains unchanged. What could be the reason for this? SCRIPT window.onload = initiateScript; fu ...

javascripthtmlcssforms

Can you explain the purpose of the bootstrap directory in Laravel?

Ever since I started learning laravel, I've been incorporating bootstrap for styling and Javascript. While exploring my laravel folder, I stumbled upon a bootstrap folder which left me wondering if bootstrap is already integrated in laravel. If it is, ...

javascriptcsstwitter-bootstraplaravel-4

What steps can I take to ensure that my header remains static while my slides move in fullpagejs?

I need help with fixing the header in my fullpagejs slide. The header currently moves along with the slide, but I want it to stay in place within the background image. When I try taking the header out of the background section, it creates a white space at ...

javascripthtmlcssfullpage.js

Troubleshooting problem with SVG icons not highlighting correctly when clicked on mobile devices

I recently incorporated SVG icons into my website. However, when I tap on them using a mobile browser, the browser highlights the icon. Is there a way to disable this highlighting effect? Example: highlight Code: <div class="ictg-before"> <svg ...

htmlcsssvg

embedding a scrollable section within a stationary container

I'm facing an issue with two divs where I need the parent to be fixed and the child to be scrollable. CSS for the parent div: aside{ height: 100%; float: left; width: 25%; position: fixed; border-style: solid; border-right-col ...

javascripthtmlcss

CSS fluid layout with three columns

I am attempting to create a 3-column layout where each column has a fluid width of 33% and height of 50%. However, when I add padding to the columns, it causes the last div to move to the next line. How can I resolve this issue? Example HTML: <div id= ...

htmlcssfluid-layout

Is there a way to achieve three distinct outlines on a circular div simultaneously?

Here is the code I have been working on. My goal is to apply three different levels of outlines to a single div element. I successfully added borders for the first level and shadows for the second. Is it possible to add a third level using only CSS? I kno ...

htmlcss

Is there a way to confirm if text is bold in an Angular website using Selenium with C#?

I am currently attempting to determine if text is displayed in a bold format within a free text area. However, when I try to select the element, I am unable to verify the text portion. I attempted to use .getCSSValues based on the provided link suggestion ...

c#cssangularseleniumwebdriverwait

Causing an element to extend beyond its parent element's boundaries

I have implemented Material Design Lite for creating cards on my website. I encountered an issue where the menu I added to the card only displays within the bounds of the card. I would like it to overflow similar to this example () Here is a link to my fi ...

htmlcssmaterial-design

In search of a mobile web UI framework solely built with CSS styling

Currently in search of a CSS framework that specializes in styling form elements and lists for optimal small screen use. The ideal framework must be CSS only, requiring minimal to no JavaScript. Something along the lines of Twitter Bootstrap would be per ...

htmlcssmobile

CSS-only spinning cube stops on one side before continuing rotation

Could someone please assist with adding an 8-second pause to a FACE when it is in the Front view, before playing the animation? Below is the code snippet: body { color: rgb(6, 106, 117); text-transform: uppercase; font-family: sans-serif; font-size: 10 ...

cssrotationplaybackcubepause

JavaScript: Retrieve the Vertical Position of a Text Within a Division

Simply put, I am looking to implement a basic search feature within my HTML div. Each potential search tag is enclosed by $ and every tag is unique. My objective is to develop a function that takes a tag, scans the div, and identifies the line (Y position ...

javascriptjqueryhtmlcss

How can you conceal nested elements within a layout that adjusts to various screen sizes or is percentage-based

Contemplate this HTML: <body> <div id="parent"> <div id="child"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus sapien congue, fringilla justo quis, aliquam tellus. Maecenas semper consectetur metus ege ...

htmlcssoverflow

Combining Bootstrap Vue: utilizing class names alongside HTML tags

(Bootstrap-Vue 2.0, Vue.js 2.5) Is it possible to combine traditional CSS Bootstrap 4 classes with Bootstrap-Vue? For example, can I use the following code snippet: <section id="introduction"> <b-container class="h-100"> & ...

cssvue.jsbootstrap-4bootstrap-vue