Aligning boards with CSS inline-block styling

Having some trouble aligning squares on my CSS Sudoku style board. Can anyone help me figure out what I'm missing?

Check out the code here on CODEPEN

Here's a snippet of the HTML:

<div class="middle-box">
  <div class="sudoku">
    <div class="square">
      <input class="tile normal edge-left edge-top">
      <input class="tile normal edge-top">
      <input class="tile normal edge-top">
      <input class="tile normal edge-left">
      <input class="tile normal">
      <input class="tile normal">
      <input class="tile normal edge-left">
      <input class="tile normal">
      <input class="tile normal">
    </div>

And here's some of the CSS code:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #ecf0f1;
background-size: cover;
font-family: "Slabo 27px", serif; }

a {
  text-decoration: none;
  transition: all 0.3s; }

.sudoku {
  width: 460px;
  height: 460px;
  background: #2c3e50;
  border: 20px solid #2c3e50;
  position: absolute;
  left: 0;
  top: 0; }
 ....
htmlcss

Answer №1

When your inputs are displayed as inline-block elements, the browser takes into account the white spaces between them. This can lead to issues when the inputs no longer fit in a row due to the space they occupy.

To resolve this issue, you can add font-size: 0 to the wrapper container. This will effectively reduce the white spaces to 0-width without affecting the font size of the inputs:

.sudoku {
  /* ... */
  font-size: 0;
}

Check out the demo here: http://example.com/demo

Answer №2

Check out this beautifully designed sudoku board:

View CodePen

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #ecf0f1;
  background-size: cover;
  font-family: "Slabo 27px", serif;
}
a {
  text-decoration: none;
  transition: all 0.3s;
}

/* CSS code for the Sudoku board design */
.sudoku {
  width: 463px;
  height: 463px;
  background: #2c3e50;
  border: 20px solid #2c3e50;
  position: absolute;
  left: 0;
  top: 0;
}
.square {
  width: 153px;
  height: 153px;
  display: inline-block;
  vertical-align: top;
  background: #8aa4be;
  margin-right: 1px;
  margin-bottom: 1px;
}
.normal {
  padding: 0;
  border: none;
  outline: none;
  font-family: inherit;
}
.tile {
  width: 50px;
  height: 50px;
  background: #fff;
  border-top: 1px solid #8aa4be;
  border-left: 1px solid #8aa4be;
  font-size: 20px;
  text-align: center;
  color: #ccc;
  line-height: 50px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.edge-left {
  border-left: 1px solid #2c3e50;
}
.edge-top {
  box-shadow: 0 -1px 0 0px #2c3e50;
  border: none;
  padding-top: 1px;
}
.middle-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  margin-top: -250px;
  margin-left: -250px;
}

<div class="middle-box">
    <div class="sudoku">
      <!-- HTML code for creating a Sudoku board -->
        <div class="square">
          <input class="tile normal"><input class="tile normal"><input class="tile normal">
          <input class="tile normal"><input class="tile normal"><input class="tile normal">
          <input class="tile normal"><input class="tile normal"><input class="tile normal">
        </div>
        <div class="square">
          <input class="tile normal"><input class="tile normal"><input class="tile normal">
          <input class="tile normal"><input class="tile normal"><input class="tile normal">
          <input class="tile normal"><input class="tile normal"><input class="tile normal">
        </div>
        <div class="square">
          <input class="tile normal"><input class="tile normal"><input class="tile normal">
          <input class="tile normal"><input class="tile normal"><input class="tile normal">
          <input class="tile normal"><input class="tile normal"><input class="tile normal">
        </div>
        <div class="square">
          <input class="tile normal"><input class="tile normal"><input class="tile normal">
          <input class="tile normal"><input class="tile normal"><input class="tile normal">
          <input class="tile normal"><input class="tile normal"><input class="tile normal">
         </div>
     </div>
</div>

Answer №3

display:inline-block; insert spaces if you wish to utilize display:inline-block;. Otherwise, remove all spaces and utilize float:left; for the .tile class

.tile {
  width: 50px;
  height: 50px;
  background: #fff;
  border-top: 1px solid #8aa4be;
  border-left: 1px solid #8aa4be;
  display: inline-block;
  font-size: 20px;
  text-align: center;
  color: #ccc;
  line-height: 50px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none; 
  -ms-user-select: none;
  user-select: none; 
  float:left // additional}

html

 <input class="tile normal edge-left edge-top"><input class="tile normal edge-top"><input class="tile normal edge-top"><input class="tile normal edge-left"><input class="tile normal"><input class="tile normal"><input class="tile normal edge-left"><input class="tile normal"><input class="tile normal">

Answer №4

Having borders on certain elements adds a margin (space around the outside), which is why some items are not aligned properly. Instead of toggling borders on and off, consider changing the border color to transparent when you want it to be hidden.

Answer №5

Take a look at this piece of code

CodePen Link

.sudoku {
  width: 532px;  //adjusted
  height: 468px; //modified
. 
.
.
}

.square {
  width: 172px; //updated
  display: inline-block;
  background: #8aa4be; 
  border:1px solid red;
}

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

Having trouble getting the Pokemon modal to show both the type and image?

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...

javascripthtmlbootstrap-4bootstrap-modal

How can one appropriately utilize the counter() function in conjunction with nested headings and corresponding counter-increment() and counter-reset() methods?

I am encountering an issue with counter-reset() when introducing a div between the initial declaration and the reset. Initially, I had structured my code like this, with headings directly under the numberedHeadings class: Now, there is a need to wrap eac ...

htmlcss

Creating a bespoke Bootstrap 4 Modal experience without the backdrop

I'm attempting to show a Bootstrap 4 modal without a backdrop. I've tried the following code with no success: .modal.right. modal-backdrop.show { background-color: transparent !important; } When I try this modification, it works (but affect ...

htmlcssbootstrap-4

Customize Tab indicator styling in Material-UI

Currently, I am attempting to customize the MUI tab by changing the indicator from a line to a background color. Through my research, I discovered that using TabIndicatorProps and setting a style of display:none eliminates the indicator completely. However ...

javascriptcssreactjsmaterial-uifrontend

tips for incorporating staticfiles processing into css files on django

Within my CSS stylesheets, I often have code snippets like the following: #defaultCountdown span.countdown_section { color:#fff; padding:7px 15px!important; margin-bottom:2px; font-weight:300; background:url(../img/bg-white.png); t ...

htmlcssdjango

When launching a modal window, the ability to dynamically change the URL and seamlessly transition into the modal window using Bootstrap 3, AngularJS, and CSS

Hello, I am looking to create a modal window that changes the URL when opened. For example, if a user clicks on a link with #123, the URL should change to include #123 after the slash. Additionally, I would like to be able to send someone a link directly ...

cssangularjs

Ensure the footer remains at the bottom of the page without utilizing a minimum height of 100

When trying to address the common issue of making the footer stay at the bottom of a page, one popular solution is to enclose everything in a div with position:relative and min-height:100%, as explained in this helpful tutorial here. The challenge arises ...

htmlcss

Can a child element be shown even when the parent element is hidden?

Is it possible to have a hidden parent and a visible child using CSS or jQuery? I'm attempting to make a child element visible on certain pages even if the parent is hidden. var bodyClass = jQuery('body').attr('class'); //ale ...

jquerycss

I require a modification in the style of every anchor element found within a div containing the designated class

In a div with the class fview, there is a nested element called iNside which contains a span. Additionally, there are anchor elements within another span, ul li, and another div, among others. I want all anchor elements to have the same style. I tried app ...

css

Using the table component object in Angular, you can easily set focus to an input field contained within a <td> element of a table

Currently, I am working on a table that dynamically populates data. Within this table, there are multiple input tags and I am looking to enhance user experience by enabling the focus to shift to the next input in the following td tag when the right arrow k ...

htmlangularangular6

The alignment of the input boxes is off when using a single label for both

I'm looking to replicate the design shown in this image for a contact form using WordPress, but I've been struggling to pinpoint where I'm going wrong. https://i.sstatic.net/VwjmH.png Here's my current code: <div class="row" style ...

htmlcsswordpresstwitter-bootstrapbootstrap-4

Attempting to execute a PHP script through a JavaScript if statement

I have a form that requires validation with JavaScript. In one of the if statements, after all other conditions have been validated, I want to execute my PHP script that updates an SQL database with one of the passwords. Here is the final validation code: ...

javascriptphphtmlformsvalidation

Loop through the list items using jQuery and retrieve the value of the data-imgid attribute

Multiple li elements have a unique data-id attribute, as shown below: <ul> <li data-imgid="5" class="getMe">some text</li> <li data-imgid="6" class="getMe">some text</li> <li data-imgid="7" class="getMe">some t ...

javascriptjqueryhtml

Combine Angular variable in JavaScript function

I want to combine "proposal.id" in the initial parameter of the window.open function. Here is my current code snippet: <button ion-button color="light" onclick="window.open('https://mywebsite.com/offer?id={{ proposal.id }}', '_self' ...

javascripthtmlangularjsionic-framework

Modify components in a web application based on the content of a JavaScript variable

I'm in the process of developing a webapp that needs to interact with an Arduino for its inputs in order to dynamically change the contents of the webpage. Currently, I am experimenting with variables that I have created and assigned random numbers t ...

javascripthtmljquerycssnode.js

Is there a way to adjust the font size in Javascript/Html without changing the color?

I have a code snippet that creates a button to increment a variable, and I want to change the font size of the displayed variable. This code is for a game akin to cookie clicker. <div class="game-object"> <script type="text/javascript>"; var c ...

javascripthtml

Importing a substantial number of records from an XML file into an HTML table

Currently, I am working on a project where I am reading records from an XML file and dynamically displaying them in an HTML table using JavaScript's push method. Everything works smoothly when the number of records is below 1000. However, when the num ...

javascriptxmlhtmlrecords

Ensuring Consistent Placement of Elements Regardless of Screen Size with CSS

I'm currently working on an Ionic App and I need to position some buttons (stacked vertically) at the bottom-left corner of the device's screen. Here is the CSS I am using: .button { left = "1em"; z-index = "13"; overflow = "scroll"; ...

htmlcssposition

The downloading functionality of anchor tags is not functioning properly on mobile devices

In the process of developing a mobile app using Ionic Framework, AngularJs, and Html, I encountered an issue. There is a specific page where users are supposed to click on a <div> element to download a wallpaper image. Strangely enough, this works ...

androidhtmlangularjsionic-framework

Internet Explorer does not display CSS effectively

Having issues with CSS on Internet Explorer While this page displays correctly in Firefox, Chrome, and Opera, on IE the "date bar" is overlapping on the first <li> bar View the issue here: The current CSS code is: #content h2.other-posts { he ...

cssinternet-explorerfirefoxcross-browserhtml