Ensuring horizontal borders are straight across a grid

Currently, I am implementing a layout similar to CSS Wizardry grids. My challenge lies in aligning horizontal borders across different grid items. The image at the top always maintains the same size. While most of the borders line up correctly, there are some instances where they become misaligned due to the grid working with percentages smaller than a pixel (refer to Blog Article 3 below).

The solution cannot involve simply using <hr> tags because on smaller screens the grid condenses into one item per row, causing alignment issues. I am seeking a responsive solution that does not rely on JavaScript for implementation. Although I do not necessarily require a code example, guidance on an effective approach would be appreciated.

https://i.sstatic.net/22hVa.png

htmlcss

Answer №1

If you're looking for a solution, consider using the display:flex property in CSS.

.container {
  display: flex;
  justify-content: space-between;
  width: 50%;
}
.container .item {
  background: green;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}
.bb {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid black;
  padding: 10px;
  border-bottom: 1px solid black;
  margin-top: 20px;
  width: 50%;
}
<div class="container">

  <div class="item"></div>

  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="bb">
  <div>
    item1
  </div>
  <div>
    item2
  </div>
  <div>
    item3
  </div>
</div>

I hope this information is helpful to you.

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

What could be causing all of my Bootstrap accordion panels to close at once instead of just the one I selected?

When implementing Bootstrap accordions in my projects, I encountered an issue where closing one accordion would cause the others to also close when reopened. To address this problem, I utilized the collapse and show classes in Bootstrap to enable users to ...

javascripthtmlcssbootstrap-5accordion

Tips for effectively utilizing the Material-UI Grid component to implement this layout

Currently, I am working on incorporating this design in Material-UI by utilizing the Grid component. To better delineate the boundaries, I have marked the container border in red for clarity. The Add button should be positioned at the far right of the c ...

csslayoutmaterial-ui

Beautifully collapsing inline-blocks using only CSS

My header features three inline-blocks within a container that is text-aligned center. The left block floats to the left, and the right block floats to the right, creating a visually appealing effect where the middle block's text remains centered on s ...

css

Insert a concise, condensed form of a Gist into an HTML document

Let's consider a scenario where we want to embed a lengthy gist in our webpage, like so: <script src="https://gist.github.com/benanne/3274371.js"></script> You can access the gist at this link: https://gist.github.com/benanne/3274371 Th ...

htmlgithubgist

Can you explain the significance of the '#' symbol within the input tag?

I was reading an article about Angular 2 and came across a code snippet that uses <input type='text' #hobby>. This "#" symbol is being used to extract the value typed into the textbox without using ngModal. I am confused about what exactly ...

javascripthtmlangular

Incorporating jQuery to seamlessly add elements without causing any disruptions to the layout

I'm looking to enhance the design of my website by adding a mouseenter function to display two lines when hovering over an item. However, I've encountered an issue where the appearance and disappearance of these lines cause the list items to move ...

javascriptjqueryhtml

Extract information from a division and transfer it to a table when clicked

I have several div elements, each containing a button. When a user clicks the button, I want to transfer the content of that specific div into a new table row. Although I've managed to create a new table row when the button is clicked using a fiddle, ...

javascriptjqueryhtml

Adjust the placement of a div within another div based on various screen sizes dynamically

Currently, I am working on an Ionic 2 app where the user is required to select specific points on the screen. These coordinates will then be utilized on another screen with a different size. My initial attempt at using rule of three/cross multiplication pr ...

javascripthtmlcssangularionic2

Is it advisable to utilize $_GET for dynamically loading HTML content?

Currently, I am in the process of developing a social networking platform using PHP, MySQL(PDO), JQuery, and HTML(CSS). My focus at this moment is on the profile page where I want to distinguish whether the user is viewing their own profile or someone else ...

phpjqueryhtmlcssmysql

Adjustable text size to accommodate different cultural changes

My team is working on an MVC web application, with CSS stylesheets utilized in views. We are trying to achieve the following scenario: Whenever the language culture changes from English to another language, we want the font size of a specific class to ...

c#htmlcssfonts

Combining CSS and JavaScript to handle two events with a single onClick

Here is the code I've created: <a href="#" id="home" class="showLink" onclick="showHide('example');return false;"> <li class="buttons">home</li> </a> <a href="#" id="user" class="showLink" onclick="showHide(&a ...

javascripthtmlcss

expandable div or cell panels

Greetings, I'm facing a challenge with my code: <div id="left"></div> <div id="center"></div> <div id="right"></div> My goal is to ensure that #center always displays at a minimum size, while the other two divs w ...

htmlcsswidth

Setting form input values to a new value in Angular 8

Is it possible to reset the value of a form input and then set another value from a service? I would like to store the old value in saveService, reset the service, and change the name attribute of the service to Hello World! Even though I correctly have t ...

htmlangulartypescriptformsangular-forms

CSS for the root folder of an ASP.NET website

After deciding to venture into ASP.NET, I quickly encountered my first obstacle. The folder structure is as follows: \ ->Admin -->Admin.Aspx ->CSS -->Style.css ->Images -->bg.gif Default.aspx Default.master Both admin.aspx and ...

asp.nethtmlcss

Showing information on a separate page based on the selected items by utilizing ng-click

I am attempting to display information about various properties on a new screen, which is accessed by clicking on a property name on the main screen. Here's what I have accomplished so far: I have retrieved data from an API and saved it in an array c ...

htmlangularjs

The primary container is brimming with an abundance of content

Can anyone help me with a CSS issue I'm experiencing in the latest versions of Chrome and Firefox? I can't seem to figure it out on my own. The problem arises with a container div that has a 50px top margin. Inside this container, there's a ...

htmlcss

Tips for utilizing the not CSS selector in your stylesheet without the asterisk

My challenge lies here: I am facing an issue with my External Style Sheet where the "*" selector is defined as follows: * { margin: 0em 4.2em 0em 0em; padding: 0em; } The problem arises when I have a tree view control in my aspx page. The above selector ...

htmlcssasp.nettreeview

Investigate the CSS display property of an element using JavaScript

Can JavaScript be used to determine if an element's CSS display == block or none? ...

javascriptcss

Using CSS to rearrange the order of specific div elements with the nth-child() selector when targeting different

I am attempting to design a centered navbar for a webpage. The navbar consists of 5 divs and my goal is to have the third div become the first one when the screen size goes below 600px. Here is the HTML code: <div class="mainmenu"> < ...

htmlcss

Animating jQuery Accordion in Horizontal Direction Extending to the Far Right

After implementing a horizontal accordion in jQuery based on the tutorial found at the following link: A minor issue arose during animation where a slight space was added on the far right side, causing the tabs to shift slightly. This problem is particula ...

javascriptjquerycssjquery-ui