Tips for creating an inline style with "border: 1px solid #72777d"

For the boxes I applied borders using "border: 1px solid #f2f2f2" as depicted in the image. The issue is that with 1px solid borders, they overlap each other. Is there a way to use inline borders with CSS instead? Thank you in advance ^_^.

border: 1px solid #f2f2f2

Answer №1

Make sure to apply the box-sizing:border-box property to prevent the element from extending beyond its designated height and width.

.container{
        box-sizing: border-box; 
        border: 1px solid #f2f2f2; 
        width:50px; 
        height:50px; 
        background:red; 
        float:left;
        }

.box1{ 
    background:green; 
    float:left;  
    width:50px; 
    margin-left:15px;
    height:50px;
   }
 
 .box2{ 
    background:yellow; 
    float:left;  
    width:50px; 
    margin-left:15px;
    border: 1px solid #f2f2f2; 
    height:50px;
   }
 
.overall{
      background:#353535;
      height:100vh;
      padding:50px;
 
}
<div class="overall">

<div class="container">
  </div>
  <div class="box1">
  </div>
 <div class="box2">
 </div>
  </div>

Notice that .container, .box1, and .box2 all have the same width and height set.

Using the box-sizing property ensures that the first box remains within its boundaries and does not overlap with neighboring elements.

Take a look at the yellow box, which also has matching dimensions. Without using box-sizing, it would extend beyond its intended size.

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

Animating content to slide into view in the same direction using CSS transitions

My goal is to smoothly slide one of two 'pages', represented as <divs>, into view with a gentle transition that allows the user to see one page sliding out while the other slides in. Eventually, this transition will be triggered from the ba ...

Shifting a static-width table within a predetermined width container

Unable to modify the HTML code for this project, I am in need of a CSS-only solution. Dealing with an unpleasant HTML structure that is causing some issues. A side by side comparison on fiddle shows where I'm currently at in the process. The challeng ...

What is the best way to place a div inside a navbar element inline?

Having a bit of trouble with my HTML code. I'm working on creating an offcanvas navbar. Here's the code snippet: <nav class="navbar navbar-dark bg-dark"> <div class="container-fluid"> <a cl ...

Positioning an image/carousel at the bottom of multiple without the need for alignment

I'm in the process of creating a single-page website with sections stacked on top of each other, including a section where divs are stacked both next to and on top of each other. Within this section, there is a container div that holds 5 divs named bo ...

Shift the column upwards for devices with smaller screens

I need help with a layout issue I am facing. Currently, my layout looks like this: [blurb] (8) [form] (4) However, I want the [blurb] to take up col-md-8 and the [form] to take up col-md-4 so that they are full width on smaller devices. On smaller devic ...

Troubleshoot: Inability to highlight a column and row in a table using ::after and ::before

To create a hover effect where the corresponding column and row are highlighted when the mouse is on a cell, as well as highlighting the row for player 1's actions and the column for player 2's actions, I attempted the following code: /* CSS Cod ...

Incorporating CSS into an HTML document with Jersey/Grizzly

This is the structure of my project: src/main/java -- main.java src/main/resources -- webapp -- -- css -- -- js -- -- images -- -- pages -- -- -- home.html Currently, my Maven project utilizes Jersey and Grizzly. I am able to call my REST services and lo ...

What are the steps to create a responsive form using CSS?

I have a screenshot below that needs to be recreated using HTML/CSS. This design should be consistent in both desktop and mobile views. https://i.stack.imgur.com/cnfHt.png Currently, I have managed to replicate this in a JSFiddle which looks good on desk ...

Adjust the table cell width to match the width of the ASP image

Below is the ASP image within a table cell: <tr> <td> <asp:Image runat="server" Width="64px" Height="64px" ImageUrl="~/Images/user64.png" /> </td> ...

Is it feasible to generate a realistic arrow using CSS and then rotate it?

Can a fully functional arrow be created using CSS alone? Here is the method I used to create just the arrowhead: http://jsfiddle.net/2fsoz6ye/ #demo:after { content: ' '; height: 0; position: absolute; width: 0; border: 10p ...

Exploring Angular's Animation Feature for HTML Element Movement

I'm currently using @angular/animations module to animate HTML objects and I want to move an object when a button is clicked. For example: * The object initially has top: 800px, left: 800px * Clicking the 'W' button should move the obje ...

What is the method for including footer content on a site that only has a masthead?

Is there a way to incorporate footer-type text with copyright disclaimer into a masthead-only website? I keep trying to add a footer, but it ends up getting stacked outside the masthead, causing the screen to become scrollable. My goal is to include the co ...

The segmented button's dropdown menu in Bootstrap is malfunctioning on Firefox version 27.0.1

I'm attempting to create a basic search bar using Bootstrap's segmented button feature (check out an example at http://getbootstrap.com/components/#input-groups-buttons-segmented). This is the code I have so far, and it's accessible on jsfi ...

Having trouble placing the flash element above the HTML?

Despite my efforts to use SWFObject to embed a swf file on my webpage, it seems that the flash movie is covering some of the HTML components. Strangely enough, the HTML elements are bleeding through and appearing on top of the flash content. I've tri ...

New navigation menu changes as user scrolls

I'm struggling to find a way to implement a different navigation menu that appears when the user scrolls down. I'm envisioning something similar to this example: My goal is to have #small-menu replace #big-menu once the user starts scrolling. C ...

Is there a way to position the logo icons on the right side of the footer?

My goal is to connect social media platforms with their respective logos, and I'm encountering an issue. The problem arises when attempting to align the list items to the right of the footer. <footer> <div class="footer-wrapper"> ...

Troubleshooting the Full Height Feature for Sidebar (Panel) in Twitter Bootstrap

I'm having issues with the Sidebar (Panel) in Twitter Bootstrap. I'm encountering some trouble with how it is displayed. Below is the CSS code I am using for the sidebar: .sharecartside .content { height: 100% !important; min-height: 10 ...

Display a modal pop-up containing HTML content

I recently started building a small website using Zurb Foundation. I have created a basic grid layout with large metro style div thumbnails (about 10 on the page). Now, I want to enhance user interaction by implementing modal windows that appear when a th ...

React JS makes it simple to create user-friendly cards that are optimized

I have a collection of objects that include a name and description. The name is short and consists of only a few characters, while the description can vary in length. I am looking to showcase this data within Cards in my React project, and have tried using ...

How can I apply bold styling to primary nodes in jsTree using CSS?

I am currently utilizing the in conjunction with asp.net mvc. My objective is to apply bold styling to the text using CSS within the main nodes, specifically those with arrows (refer to the image below). https://i.sstatic.net/xg3uF.png Below is the code ...