Styling Alternating Rows with Left-Floated Elements in CSS

Question

Styling Alternating Rows with Left-Floated Elements in CSS

I'm in the process of revamping the layout of my blog using CSS3. Rather than continuing to utilize a table like I did before, I want to explore new design possibilities.

My blog is titled "Wall of Text," and its header features a unique brick-like pattern created by a repeating background image. Below the header are links to archived posts that also mimic the appearance of bricks from the wall of the header. While the first row looks perfect, I am encountering challenges when the links wrap onto the next row. In order to maintain the brick-like pattern, I believe the second row should have a left offset/margin/padding of 20px.

The arrow indicates where I desire the indentation.

Initially, I attempted to use the display: table-row container with the :nth-child(even) selector for styling. However, I found it difficult to position elements correctly, so I switched to using display: table. Unfortunately, the current setup results in the :nth-child(even) selecting every other brick instead of every other row.

If you'd like to take a look at my code populated with placeholder "links," you can find it here: jsfiddle.

Any suggestions on how I can achieve this desired layout?

html css twitter-bootstrap-3

Answer 1

Answer №1

The initial step involves identifying the starting point of new lines. Assuming all bricks are of the same width, you can ascertain the number of bricks per line by knowing the total width of the bricks and that of the container.

Code in Javascript

// calculating the width of the brick container
var cont_width = document.getElementsByClassName('bricks')[0].offsetWidth;

// summing up the widths of all the bricks 
var bricks_width = 0;
var bricks = document.getElementsByClassName('brick');

for (var i = 0; i < bricks.length; i++) {
    bricks_width += bricks[i].offsetWidth;
}

In the next step, some margin needs to be added (possibly negative) to the first element of every second line. In the code snippet above, we have all the brick elements stored in var bricks, which allows us to iterate through them again with this logic:

Javascript code

var bricksPerLine = Math.floor(bricks.length / (bricks_width / cont_width));
var bAlt = false;

for (var i = 0; i < bricks.length; i++) {
    if (i % bricksPerLine == 0) {
        if (!bAlt) {
            bAlt = true;
            bricks[i].style.marginLeft = '-20px'
        } else {
            bAlt = false;
        }
    }
}

JS-Fiddle

Note: For responsive websites, this code must be triggered on each resize event. It's evident that there are areas where the code can be further optimized.

Answer 2

The initial step involves identifying the starting point of new lines. Assuming all bricks are of the same width, you can ascertain the number of bricks per line by knowing the total width of the bricks and that of the container.

Code in Javascript

// calculating the width of the brick container
var cont_width = document.getElementsByClassName('bricks')[0].offsetWidth;

// summing up the widths of all the bricks 
var bricks_width = 0;
var bricks = document.getElementsByClassName('brick');

for (var i = 0; i < bricks.length; i++) {
    bricks_width += bricks[i].offsetWidth;
}

In the next step, some margin needs to be added (possibly negative) to the first element of every second line. In the code snippet above, we have all the brick elements stored in var bricks, which allows us to iterate through them again with this logic:

Javascript code

var bricksPerLine = Math.floor(bricks.length / (bricks_width / cont_width));
var bAlt = false;

for (var i = 0; i < bricks.length; i++) {
    if (i % bricksPerLine == 0) {
        if (!bAlt) {
            bAlt = true;
            bricks[i].style.marginLeft = '-20px'
        } else {
            bAlt = false;
        }
    }
}

JS-Fiddle

Note: For responsive websites, this code must be triggered on each resize event. It's evident that there are areas where the code can be further optimized.

Styling Alternating Rows with Left-Floated Elements in CSS

Answer №1

Similar questions

Navigating websites with JQuery

The content of the modal box is determined by the custom field

Double f span causing unusual behavior in Chrome browser

Is there a way to display an element only when it is clicked on, and then hide it when other elements are clicked on?

Manipulating class and element text within an anchor element using jQuery

Populate a form with data retrieved from a MySQL query result

Struggling with resizing my card height in bootstrap

Is there a way to ensure the browser always fetches the HTML and CSS files from the server instead of relying on the cache?

Styling a dynamically-injected div using an AJAX request (xhrGet)

Modifying the CSS will not be reflected in the appearance

Looking to include a tag in the top left corner of a product card?

Achieving functionality with dropdown menus in jQuery

inadequate document object module problem

Set a div to have both absolute positioning and sticky behavior

Leveraging CSS Files with InertiaJS, Vue, and Laravel

Is there a copyright concern regarding CSS?

Create a stylish design with Bootstrap 3.0 featuring a full-width color background and compact columns perfectly centered on the

Refreshing a specific area on a webpage through the use of Ajax technology

Sending the complete data from an HTML table to a web method

Scripted AngularJS directive