A single pixel border surrounding an odd number of divs

I've been struggling with a persistent issue and I'm determined to find a solution. My goal is to achieve the following design using css:

https://gyazo.com/c8ae39ebc4795027ba7c1067a08d3420

Currently, I have an uneven number of divs styled as follows:

.box{
    background-color: grey;
    float: left;
    width: 33.33%;
    border: 1px solid black;
}

I've been trying to restyle the middle divs using nth-child but it's causing them to appear in strange orders and it all feels very chaotic. Is there a simpler solution?

Here's a Codepen example of what I'm attempting to achieve:

http://codepen.io/anon/pen/RrqNzM

Any help is greatly appreciated. Thank you.

htmlcss

Answer №1

There isn't a standardized method for achieving this effect, but a simple workaround involves applying a border only to the right and bottom of the .box element, and only to the top and left of the wrapping element. This creates the appearance of collapsed borders.

.box,
.wrapper {
  border: 1px solid red;
}
.box {
  border-top: none;
  border-left: none;
  box-sizing: border-box;
  width: 33.33333333%;
  float: left;
  height: 45px;
}
.wrapper {
  border-right: none;
  border-bottom: none;
  overflow: hidden;
}
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer №2

Explore an alternative approach for the same solution on this fiddle link https://jsfiddle.net/anilram25/rztfv00f/

<div class="main-div">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="clearfix"></div>
</div>

and the corresponding CSS

html, body{
    margin: 0;
}

*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.main-div{
  border-top:5px solid #CD4431;
  border-bottom:5px solid #CD4431;
  background-color:#1B1B1C;
  padding-bottom:1px;
  padding-left:1px;
}
.box{
    background-color: #282828;
    float: left;
    width: 33.33%;
  border:1px solid #ccc;
    margin-right: -1px ;
  margin-bottom: -1px ;
  height: 50px;
}
.clearfix{

  clear:both;
}

Answer №3

In order to preserve the border of the container, follow these steps:

(1) Eliminate the left and top borders of the child elements:

div.wrap > div { border: 1px solid #666; border-left: none; border-top: none; }

(2) Utilize nth-child(3n) to eliminate the right border of every third child div:

div.wrap > div:nth-child(3n) { border-right: none; }

(3) Subsequently, for the final div, remove the bottom border:

div.wrap > div:nth-last-child(-n+1) { border-bottom: none; }

Keep in mind: If there are more than seven children, adjust the m in (-n+m). For instance, with eight children it would be (-n+2), and for nine children (-n+3).

Snippet:

* { box-sizing: border-box; padding:0; margin:0; }
div.wrap {
width: 75vw; margin: 16px; overflow: hidden; 
border: 1px solid #666; 
/*border-top: 5px solid darkorange; border-bottom: 5px solid darkorange;*/
}
div.wrap > div {
width: 33.3333%;  height: 48px; float: left; 
line-height: 48px; padding: 0px 8px; overflow: hidden;
border: 1px solid #666; border-left: none; border-top: none;
}
div.wrap > div:nth-child(3n) { border-right: none; }
div.wrap > div:nth-last-child(-n+1) { border-bottom: none; }
<div class="wrap">
<div>Lorem ipsum</div><div>Lorem ipsum</div><div>Lorem ipsum</div>
<div>Lorem ipsum</div><div>Lorem ipsum</div><div>Lorem ipsum</div>
<div>Lorem ipsum</div>
</div>

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 is the best way to reverse a condition in CSS?

Here is my HTML/CSS code, I am relatively new to this field. Please let me know if I have overlooked anything. .dropdown-menu>li>a { padding: 3px 5px; } <li> <a id="btn-other-1" href="#"> <!–- I do not want apply css for t ...

htmlcss

In Javascript, swap out a particular colored region in an image with a different image

I've been scouring the internet in search of a solution to my problem, but it seems like I might not be looking in the right places. Imagine this image below, how can I replace the blue area with an image uploaded by the user? I'm struggling to ...

javascripthtmlcsshtml5-canvas

Import information from a MySQL table into a single input field

I am currently working on a project that involves retrieving data from a MySQL database and displaying it in a single field. Below is the MySQL code I am using: My goal is to load all the data from $row['db_numbers']; into the field. <input t ...

phphtmlmysql

Leverage the model attribute in a Spring controller to conditionally display elements using

I am currently working with spring boot, angularjs and using html as the view. This setup is being implemented in index.html. <a ng-show="permission=='write'"> By returning the 'permission' value in the model from the spring boo ...

htmlangularjsspring

The functionality of @Output and custom events appears to be malfunctioning

I am a beginner in Angular and attempting to pass data between child and parent components. In the child component.ts file: @Output() doubleClick = new EventEmitter<string>(); onDoubleClick(nameAccount: string){ this.doubleClick.emit(nameAccoun ...

htmlangulareventsbinding

Why does React-Perfect-Scrollbar not work properly when the height of an element is not specified in pixels?

Currently, I am developing a chat application with React 18 for its user interface. The app includes a sidebar that displays user profiles. To ensure the app fits within the browser window height, I've made the list of user profiles scrollable when n ...

javascriptcssreactjsjsx

What is the best way to dynamically add getJSON's data to a div whenever the loadmore button is clicked?

When a page loads, my getJSON function displays its output in a div called myDiv. Now, I am looking to add a button at the bottom of the page. When the user clicks this button, I want to trigger another call to getJSON. Each time the button is clicked, I ...

javascriptjqueryhtmlajaxgetjson

HTML tends to disregard the dimensions specified in the JavaScript file

I'm currently working on replicating an Etch-a-Sketch style drawing board where hovering over a single pixel with the mouse changes its color. However, I've hit a roadblock when it comes to drawing the board. The flexbox container doesn't se ...

javascripthtmlcssflexboxsize

unable to connect to the web service using webview

When attempting to call a web service or display an alert, I am encountering some issues: Here is the code from my activity: mWebView = (WebView)findViewById(R.id.webViewRootAciviy); mWebView.setWebViewClient(new WebViewClient()); mWebView.setWebChromeCl ...

javascriptandroidjqueryhtml

emphasizing the specific text being searched for within the page

Looking for a solution to search values and highlight matching text words on a page? Let me help you with that. $(function() { var tabLinks = $('.nav > li'), tabsContent = $('.tab-content > div'), ...

javascriptjqueryhtmlhighlight

When attempting to access http://localhost:3000/highLightTitle.png using Next.js, a 404 error (Not Found) was encountered in the content

Despite not having any mention of GET http://localhost:3000/highLightTitle.png in my Next.js project code, I am encountering an error related to this issue. The error can be viewed here, and specifically at line 199 in content.js which can be seen here. T ...

javascripthtmlreactjsnext.jsfrontend

What is the process for embedding a 3D model using three.js into a specific div on a webpage?

Lately, I've been struggling with a persistent issue. I can't seem to figure out how to integrate my three.js scene into a div on my website. Despite watching numerous YouTube videos and reading countless articles on the topic, I still haven&apos ...

javascripthtmlcsswebthree.js

What is preventing FancyBox from functioning properly?

Seeking assistance in implementing FancyBox for an e-commerce website I am developing for a client. Despite trying various tutorials and troubleshooting steps over the course of three days, I have been unable to get it to function properly. Not encounterin ...

jqueryhtmljquery-pluginsfancyboxfancybox-2

What is the process for adding tailwind CSS via npm?

Before, I was including Tailwind using a CDN. Now, I have installed it with npm and all three .css files are included, but the styles are not appearing in my HTML document. Here is the directory structure and a link to style.css The content of tailwind.c ...

cssnpmtailwind-css

Tips for adjusting the width of the box-shadow in CSS

I am facing a challenge with my button that has a box-shadow effect on hover. Currently, I am unsure how to adjust the width of the box-shadow effect. Here is a snapshot of my button's current appearance: https://i.stack.imgur.com/Mg0df.png</p&g ...

cssbox-shadow

Show the time with AM/PM without displaying the year, month, or day

Currently, I am struggling to show the time as AM when my website loads using the format mm-dd-yyyy --:-- AM in a datetime-local input. The value attribute of datetime-local is causing some confusion for me. ...

javascripthtmlcss

Use CSS3 to hide the <li> elements initially and make them appear when the <li> is clicked on

Click here How can I hide the "subline" line from the list and make it visible when the user clicks on the "sub" line, pushing the other lines down? I'm hoping for a solution that doesn't involve using Js or JQuery. Thank you in advance! ...

htmlcss

Styling text of various sizes to appear together in a div container

I'm having trouble getting my text to align in a single line. I've tried using vertical-align: middle and vertical-align: bottom... Can someone please assist me? http://jsfiddle.net/2wDEw/ Here is a simple example of what I have: ...

htmlcss

Enhancing functionality with jQuery: updating multiple input fields at

Currently, I am attempting to utilize jQuery to modify some HTML text by adjusting a slider. I have managed to accomplish this; however, I also need it to happen only if a checkbox is checked. How can I integrate both conditions and ensure that the text ch ...

javascriptjqueryhtmlcheckboxslider

What is causing Firefox to consistently shave off 1px from the border of table cells?

Why is Firefox removing 1px from the border's value as defined in the CSS file? .aprovGriditem th { border-collapse: collapse; border: 4px solid #BBC6E3; padding: 0; } UPDATE <table cellpadding="0" cellspacing = "1" runat="server" id= ...

htmlcssfirefoxhtml-table