In my div block, the width is not fixed.
Inside the div, there is a list block with 11 items that I want to display evenly like this:
##item## ##item## ##item##
##item## ##item## ##item##
##item## ##item## ##item##
##item## ##item##
I've tried using float left and right but can't get the central 3 elements to center properly.
Do you have any suggestions on how to fix this?
Thank you!
Check out the informative article on Inline Blocks shared by Jordan. It serves as a valuable resource, especially for ensuring compatibility with older browsers. For those who stumbled upon this page from Google seeking quick guidance, here's a snippet of basic CSS to create a centered, inline-block grid:
ul {
margin: 0 auto;
text-align: center;
}
li {
display: inline-block;
vertical-align: top;
}
To seamlessly organize content into columns, consider utilizing CSS columns:
http://jsfiddle.net/6tD2D/ (prefixes not provided)
ul {
columns: 3;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
</ul>
This approach will attempt to distribute the items evenly across the columns. In cases where there are insufficient elements for perfect balance, removal will start from the right side rather than the center.
As noted in a StackOverflow discussion on designing grid layouts (source), utilizing Inline Blocks could be the solution you've been looking for.
Additionally, if you haven't explored it yet, consider incorporating CSS Grids into your design strategy by referring to resources like this guide. For those who prefer ready-made solutions, check out this pre-built CSS grid which comes highly recommended.
ul {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
"col1-item1 col2-item1 col3-item1"
"col1-item2 col2-item2 col3-item2"
"col1-item3 col2-item3 col3-item3"
"col1-item4 col2-item3 col3-item4";
}
/* Apply classes to each li */
/* Column 1 */
.col1-item1 { grid-area: col1-item1; }
.col1-item2 { grid-area: col1-item2; }
.col1-item3 { grid-area: col1-item3; }
.col1-item4 { grid-area: col1-item4; }
/* Column 2 */
.col2-item1 { grid-area: col2-item1; }
.col2-item2 { grid-area: col2-item2; }
.col2-item3 { grid-area: col2-item3; }
/* Column 3 */
.col3-item1 { grid-area: col3-item1; }
.col3-item2 { grid-area: col3-item2; }
.col3-item3 { grid-area: col3-item3; }
.col3-item4 { grid-area: col3-item4; }
<ul>
<!-- Column 1 -->
<li class="col1-item1">col1 item 1</li>
<li class="col1-item2">col1 item 2</li>
<li class="col1-item3">col1 item 3</li>
<li class="col1-item4">col1 item 4</li>
<!-- Column 2 -->
<li class="col2-item1">col2 item 1</li>
<li class="col2-item2">col2 item 2</li>
<li class="col2-item3">col2 item 3</li>
<!-- Column 3 -->
<li class="col3-item1">col3 item 1</li>
<li class="col3-item2">col3 item 2</li>
<li class="col3-item3">col3 item 3</li>
<li class="col3-item4">col3 item 4</li>
</ul>
For a live demo, visit this link: https://jsfiddle.net/omarjuvera/p3wajehs/2/
You can also execute the code directly on that page.
My attempt at creating a custom toggle button using an HTML input checkbox and custom CSS has resulted in a misalignment between the text and the toggle button itself. Despite my efforts to adjust margins, padding, and heights, I have been unable to resolv ...
I have successfully implemented an auto-complete Textbox along with a styled div underneath it. When the client selects an item from the Textbox, it appears in the div after applying CSS styling. Now, I am looking to create an event where clicking on the s ...
I'm attempting to create a drop-down button for two specific columns in my HTML table, but all the rows are being converted into drop-down buttons. I only want the "categorycode" and "categoryname" columns to be drop-down. $(document).ready(functio ...
I'm facing an issue while trying to create an excel-style table using HTML and CSS. The problem arises when I attempt to have a varying number of columns in different rows, as the table exceeds the border limit and expands on its own. My goal is to re ...
Basic code snippet: <?php session_start(); if ((!isset($_SESSION['valid']) == true)) { unset($_SESSION['valid']); header('location:index.php'); } ?> <!DOCTYPE html> <html lang="pt-br"> <h ...
I recently undertook a project at work that involved displaying multiple PDF thumbnails/images on a webpage. These files were dynamically loaded from a directory on my system. Each thumbnail corresponded to a PDF file stored in a different directory. My g ...
After examining the code provided: <div class='hotel_photo_select'> Hello </div> <div class='itsHidden' style='display:none'> <div class='hotel_photo_select'> Hello </ ...
Currently, my PHP script is generating new files based on user input. I want all documents to be created using the initial input to ensure consistency. In the first PHP script, I set the variable as follows: session_start(); $_SESSION["FirstName"] = $_POS ...
I have designed a simple angular-material form with various inputs that are organized using angular flex-layout. The form displays correctly in all browsers except for Safari on iOS devices. The problem in Safari arises when loading a form that contains d ...
I have created an interactive report with a form where the interactive report is on page 2 as the parent page and the form page is on page 3 as the child page. In the parent page, I have written JavaScript to open a modal window (form page - page 3) using ...
I'm attempting to create a login page similar to Instagram using HTML and CSS. However, I'm having trouble styling the button to match Instagram's login page. The button <input type="submit" class="sub-btn"> The CS ...
I have integrated VueJS into my HTML template for an application. When a button is clicked, it passes the object of a component to its root in the following manner: <button v-on:click="$root.savePlan(dataObj)"></button> The dataObj is passe ...
https://i.stack.imgur.com/9lumC.png Is there a way to create an hr line that looks exactly like the image above? I attempted using clip-path: polygon(0 20%, 0 100%, 100% 100%, 100% 0%, 5% 0) but it didn't work .divider { color:#1D0000; ...
I'm currently facing an issue with executing a javascript function - onload only in a specific div. I seem to be stuck on this problem, so if anyone could offer some assistance, I would greatly appreciate it. Thank you very much in advance! functio ...
I'm currently working on adding a sidebar to my Twitter Bootstrap 3 project. The goal is to have a fixed positioned nav nav-pills nav-stacked show up on the left side of the page when a button is clicked. I've set its z-index to 1000 so it appear ...
Sorry if this is a bit unclear, but I'm trying to figure out how to change only a section of my font when it overlaps with an image while scrolling. If you visit this example website, you'll see what I'm referring to: For a visual represen ...
Implementing jqgrid with Symfony to display a datagrid has been a challenging task for me. Thanks to Oleg's insightful response, many of the major issues have been resolved. Below is a snippet of my code: <link rel="stylesheet" type="text/css" ...
My mouse over / mouse out animation works perfectly in Firefox and Chrome, but it's not functioning in IE. Can anyone suggest why this might be happening when it was working fine before? var actual = 1; var over = 0; var over2 = 0; function scrol ...
Is there a way to arrange 4 items inside a flex container in a 2 X 2 grid layout while ensuring that they all have the same width and height? I've tried using flex-grow: 1;, but since the children are in different flex containers, they do not obey th ...
Traditional fonts typically require a separate file for each weight variant, such as 300, 400, and 500. However, with variable fonts, all weight combinations can be accessed through a single compact font file. This is extremely advantageous for web design. ...