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!

htmlcss

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 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 №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!

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

In Internet Explorer, transitions do not always play correctly when using ng-animate and ng-if

I am facing an issue with a simple div that has a transition effect. It goes from a yellow background to a red one. <div class="bar" ng-class="{'bar-visible': vm.visible}"> The transition works smoothly when the bar-visible class is added ...

angularjscsscss-transitionsng-animate

Tips for ensuring a function in Angular is only executed after the final keystroke

I'm faced with the following input: <input type="text" placeholder="Search for new results" (input)="constructNewGrid($event)" (keydown.backslash)="constructNewGrid($event)"> and this function: construct ...

htmlangulartypescriptinputrxjs

PHP code for uploading multiple images at once

I am currently facing an issue with uploading multiple files at once and not getting the desired result. Below is my code snippet: <?php if (isset($_FILES['uploadfiles'])) { print_r($_FILES); } ?> <form action="index.php" method="po ...

phphtmlimage

Is there a way to verify the existence of a specific error in the console?

There seems to be a conflict between a WordPress plugin or code left behind by the previous programmer, causing the WordPress admin bar to always remain visible. While no error is triggered for admins, visitors may encounter a console error. My goal is to ...

javascriptjqueryhtml

Having trouble finding two p-col-6 elements side by side in the PrimeNG FlexGrid with Angular?

I have integrated Flex Grid into my Angular7 project. In the initial state, I am able to display two p-col-6 elements side by side without any issues. However, when I try to rearrange them in p-col-12, they no longer align properly. Here is a detailed expl ...

htmlcssangulartwitter-bootstrapprimeng

Determine the specific value of an HTML table cell by specifying the column name for a specific row

One challenge I am facing is dynamically creating a table using JSON without knowing in advance the number of columns and/or rows that will be generated. I have successfully added a clicked event for the row that gets selected. In every table, there will ...

javascriptjqueryhtml

Issues with Rails not successfully sending AJAX data to the controller

I am new to AJAX, so please bear with me while I try to figure this out. My goal is to send data from a chat message box to two places – the chat box itself and to a method in my Rails backend. This way, I can display the message in real-time and also st ...

javascripthtmlruby-on-railsrubyajax

Rendering HTML with jQuery using AJAX: Step-by-step guide

Within my webpage, I have implemented a select box that contains a list of various books. The purpose of this select box is to allow the user to choose a book and then click a submit button in order to view the chapters of that book on a separate page. Ho ...

javascriptjquerypythonhtmlajax

A compilation of approved classes for the quill toolbar

The instructions provided in the documentation for the quill module indicate that you can manually create a toolbar using HTML, and then pass the corresponding DOM element or selector to Quill. This will result in the ql-toolbar class being added to the to ...

javascripthtmlquill

Difficulty Aligning Angular Material Expansion Panel with mat-nav-listI am facing an issue with

Currently, I have implemented a mat-nav-list to showcase the Menu items on my webpage. However, there seems to be an alignment issue with the 4th Menu item which is an Angular Material Expansion control. Refer to the screenshot provided below for clarifica ...

htmlcssangularangular-material

What steps can I take to ensure that both of my codes are functioning properly in order to consistently operate the D3?

In my index.php file, I have HTML code that loads a d3 liquid gauge. When I open this in a browser with a static integer inserted into the code, it works perfectly. Then, I have another file called Tdata.php which queries MySQL and returns a table in JSON ...

phpjsonhtmld3.jsraspberry-pi

I have implemented an email validation form in Angular, however, if the validation is not properly handled, the data will still be stored. How

When I enter an email address, for example: if I enter "abc" it shows an alert saying "please enter a valid email". If I leave it blank and try to submit, it shows an alert saying "email required". But when I click register, the data is saved regardless of ...

htmlangular

Side navigation in Angular is not causing the main content to shrink

In my layout, I have a container that includes two sidenavs and multiple tables in between them. When I toggle the left sidenav, instead of the expected behavior where the content shrinks to accommodate the sidenav, the tables get pushed to the right as if ...

htmlcssangularcss-grid

"Rotated element in Opera does not maintain event functionality when positioned outside its

Make sure to test this example on Opera (version 12.02) by clicking this link. In Opera, try clicking the red box inside the blue box (event is triggered), then click the red box outside the blue box (event isn't triggered). The container must have p ...

cssrotationopera

External CSS stylesheets

I have encountered the following HTML code: <div class="entry"> <p></p> //text-indent here <blockquote> <p></p> //no text-indent here </blockquote> </div> I am trying to apply a ...

htmlcss

What is the best way to restrict the number of iterations in ngFor within Angular HTML

I want to use ngFor to display a maximum of 4 items, but if the data is less than 4, I need to repeat the loop until there are a total of 4 items. Check out this example <img *ngFor="let item of [1,2,3,4]" src="assets/images/no-image.jpg" styl ...

htmlangulartypescript

What is the best way to retrieve the color of a WebElement when dealing with a complex CSS structure in Webdriver

I am currently trying to determine if the color of a specific page changes immediately after clicking on a button designed to alter the color of an element within that page. My goal is to extract the RGB value stated as rgb(183,168,168); in this particul ...

javacsswebdriverselenium-webdriver

A curious phenomenon observed in the behavior of the jQuery offset() method

Once I executed the following code snippet multiple times: $view.offset({ left : X, //X remains constant top : this.y }); console.log($view.offset()); //displays expected output I noticed (using Firebug) that the HTML code looked like this: <di ...

javascripthtml

Iterating over a table and selecting a specific button on the rows that meet a specific condition

I'm having a bit of trouble and would really appreciate your help. I'm attempting to write a script that will scan through this table and delete any row that contains the word "active". The script needs to check every row in the table. The code ...

pythonhtmlseleniumpytest

The arrangement of <source> tags within the <audio> element can cause issues with browser compatibility

I'm having a slight issue with the audio files on my webpage. I've set up both MP3 and Ogg Vorbis files using FFmpeg to ensure compatibility with modern browsers. However, I've noticed that Safari only plays the audio when the MP3 file is li ...

htmlaudio