Struggling with evenly positioning 6 elements in two rows using CSS

Question

Struggling with evenly positioning 6 elements in two rows using CSS

For positioning 6 different elements on a webpage, I've experimented with various methods:

I initially tried stacking two unordered lists vertically but faced issues with scaling when stretching the page. Another attempt was using a table, but I struggled to center all elements within their respective tds.

Here's the CSS for my unordered lists:

.button ul {
    height: auto;
    list-style: none;
}

.button li {
    display: inline-block;
    list-style: none;
    margin: 0 18% 0 0;
    padding: 0;
    vertical-align: top;
}

which is enclosed within:


.newfooterright {
    float: left;
    width: 33.333333%;
    top: 0%;
    left: 0%;
    height: 250px;
    padding: 0 0 0 0;
    margin: 0;
    font-family: RobotoLight;
    text-decoration: none;
    text-transform: none;
    font-size: 1.5em;
    text-align: center;
    color: #ffffff;
    vertical-align: middle;
}

Refer to this jsFiddle for the implementation: jsFiddle for unordered list

It seems an unordered list might be suitable... but aligning all elements in the center of each li poses a challenge. The bottom elements appear stuck in the bottom right corner of li. Since these are Google+, Twitter, and Facebook widgets, this may affect their position.

In essence, the elements should:

Adjust spacing based on window width (considering padding-right or margin-right)
Maintain alignment between top and bottom elements as they scale
Positioned as depicted in the image!

If you have any suggestions for cleaner positioning, please share!

Many thanks!

html css

Answer 1

Answer №1

If you're looking for a way to structure your HTML, consider this method using the following scaffolding:

<div class="newfooterleft">
    <ul class="button">
        <li><a class="twitterbutton" href="#"></a></li>
        <li><a class="facebookbutton" href="#"></a></li>
        <li><a class="googleplusbutton" href="#"></a></li>
    </ul>
    <ul class="widget">
        <li>(Add corresponding widget content here)</li>
        <li>(Add corresponding widget content here)</li>
        <li>(Add corresponding widget content here)</li>
    </ul>
</div>

Along with the provided CSS styling:

.newfooterleft {
    width: 40%;
    border: 1px solid red;
    overflow: auto;
}

.twitterbutton {
    background: url("http://www.placekitten.com/100/100") no-repeat;
    background-size: 100%;
}
.twitterbutton:hover {
}

.facebookbutton {
    background: url("http://www.placekitten.com/100/100") no-repeat;
    background-size: 100%;
}
.facebookbutton:hover {
}

.googleplusbutton {
    background-image: url("http://www.placekitten.com/100/100");
    background-size: 100%;
}
.googleplusbutton:hover {
}

.newfooterleft ul {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
}
(new details)

This layout works well unless the width is extremely narrow. In that case, adding a min-width property might be helpful.

You can also experiment with display: table-row for alternative layouts.

Check out the demo on Fiddle: http://jsfiddle.net/audetwebdesign/2U3D9/

Answer 2

If you're looking for a way to structure your HTML, consider this method using the following scaffolding:

<div class="newfooterleft">
    <ul class="button">
        <li><a class="twitterbutton" href="#"></a></li>
        <li><a class="facebookbutton" href="#"></a></li>
        <li><a class="googleplusbutton" href="#"></a></li>
    </ul>
    <ul class="widget">
        <li>(Add corresponding widget content here)</li>
        <li>(Add corresponding widget content here)</li>
        <li>(Add corresponding widget content here)</li>
    </ul>
</div>

Along with the provided CSS styling:

.newfooterleft {
    width: 40%;
    border: 1px solid red;
    overflow: auto;
}

.twitterbutton {
    background: url("http://www.placekitten.com/100/100") no-repeat;
    background-size: 100%;
}
.twitterbutton:hover {
}

.facebookbutton {
    background: url("http://www.placekitten.com/100/100") no-repeat;
    background-size: 100%;
}
.facebookbutton:hover {
}

.googleplusbutton {
    background-image: url("http://www.placekitten.com/100/100");
    background-size: 100%;
}
.googleplusbutton:hover {
}

.newfooterleft ul {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
}
(new details)

This layout works well unless the width is extremely narrow. In that case, adding a min-width property might be helpful.

You can also experiment with display: table-row for alternative layouts.

Check out the demo on Fiddle: http://jsfiddle.net/audetwebdesign/2U3D9/

Answer 3

Answer №2

If you want to target every 3rd element, the best approach is to utilize the :nth-child() selector. Within the parentheses, you can specify a combination of n and a number. Additionally, there are keywords like odd and even that can be used. In this scenario, you will have 3 distinct :nth-child() selectors set up as shown below:

li:nth-child(6n+1), li:nth-child(6n+2), li:nth-child(6n+3) {
  color:red;
}

The 6n portion targets every sixth element, with the added number after the plus sign further specifying which elements to select. By inputting 1, for instance, you would retrieve 7 for the first selector, 8 for the second, and 9 for the third.

To see this technique in action, check out this JSFiddle demo.

For a more detailed explanation on how nth-child functions, take a look at this informative article.

Answer 4

If you want to target every 3rd element, the best approach is to utilize the :nth-child() selector. Within the parentheses, you can specify a combination of n and a number. Additionally, there are keywords like odd and even that can be used. In this scenario, you will have 3 distinct :nth-child() selectors set up as shown below:

li:nth-child(6n+1), li:nth-child(6n+2), li:nth-child(6n+3) {
  color:red;
}

The 6n portion targets every sixth element, with the added number after the plus sign further specifying which elements to select. By inputting 1, for instance, you would retrieve 7 for the first selector, 8 for the second, and 9 for the third.

To see this technique in action, check out this JSFiddle demo.

For a more detailed explanation on how nth-child functions, take a look at this informative article.

Answer 5

Answer №3

Your list items seem primed for collapsing. Why not try setting a specific height and width for each li element to create boxes, then apply relative positioning styles to position the images using top and left values (don't forget that percentages can help with scaling). I've provided some guidance on how to achieve this since you prefer hands-on learning, but feel free to reach out if you require the CSS code!

Answer 6

Your list items seem primed for collapsing. Why not try setting a specific height and width for each li element to create boxes, then apply relative positioning styles to position the images using top and left values (don't forget that percentages can help with scaling). I've provided some guidance on how to achieve this since you prefer hands-on learning, but feel free to reach out if you require the CSS code!

Struggling with evenly positioning 6 elements in two rows using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Position the image, text, and header within a box in uniform alignment

The background image in the header does not fully extend to cover all of the header content

creating an animated loop within an Angular template

The jQuery datatable offers a convenient date function that allows for date manipulation in milliseconds format

What could be causing Typed.js to not function properly in my situation?

Encountering difficulties reaching $refs within component method

Displaying several modals with a backdrop on top of one another using Bootstrap

Mastering the nav-item class in Bootstrap 4 for optimal navigation functionality

Steps to design a unique input radio button with embedded attributes

Looking for assistance with PHP if statement and troubleshooting iFrame issues

Utilize CSS Steps to incorporate the initial position

Troubleshooting the Inline-Block Problem with Jquery Image Bubble Display

Problem encountered while extracting data from HTML structure using indexing

@page Css not displaying properly on the Mozilla Firefox browser

Add a new component in front of another component based on its attribute value

What is the best way to design a content page with linked boxes to various arrays in PHP?

The navigation bar at the top of the page is causing content to be blocked on mobile screens, but not on desktop screens

What are some ways I can ensure my webpage remains consistent and user-friendly when scrolling, rather than appearing distorted and jumbled?

Ways to apply CSS in jQuery using various combinators

An innovative approach to incorporating multiple patterns into HTML input using markup alone, without the need for JavaScript