Setting a right border breaks my html and css layout

HTML-CSS
1

I’m trying to make the html and css for a simon game in a circle style. I made the circle and the colors are on their sides with borders to make a circle, but I’m having trouble placing the right and left borders of some colors. On my green colored div when I add the style border-right: 10px solid;, my other divs break out of their parent container and the layout breaks. When I remove that style its back to normal. I don’t know why this is happening or what I should do to fix it and I would appreciate any help with this. link to my project: https://codepen.io/icewizard/pen/JLBpNQ

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>Simon Game</title>
        <link rel='stylesheet' href='./main.css'>
        <script type='text/javascript' src='./simon.js' async></script>
    </head>
    <body>
        <div class='container outer centered'>
            <div id = 'blue' class= 'color shade'></div>
            <div id = 'red'  class= 'color shade'></div>
            <div id = 'options'></div>
            <div id = 'green'  class= 'color shade'></div>
            <div id = 'yellow'  class= 'color shade'></div>
        </div>
    </body>
</html>

body{
    background-color: gray;
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.outer{
    height: 30em;
    width:30em;
    background-color:rgba(21, 56, 41, 1);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 50%;
    border-style: solid;
    border-width: 10px;
}

/*=============Color buttons=================*/

.color{
    flex-grow:1;
    flex-shrink: 1;
    flex-basis: 50%;
}

#green{
    background-color:green;
    border-bottom-left-radius: 100%;
    border-top: 10px solid;
    border-right: 10px solid;
}

#blue{
    background-color:blue;
    border-top-left-radius: 100%;
}

#yellow{
    background-color:yellow;
    border-bottom-right-radius: 100%;
    border-top: 10px solid;
}

#red{
    background-color:red;
    border-top-right-radius: 100%;
}
2

Whenever you add a border to a div, the border is automatically placed outside of the div, thus increasing its surface.

If you have a div that is 50px² wide and add a 10 px border to it, it becomes a 60px² wide div.

In your app, you calculated the surface of the outer div to nest the 4 color buttons, but did not take consideration of their border, so when you add the borders, it breaks the positions since the document jumps a line if two div takes too much space to be next to each other.

To solve that you can either take into consideration the border by decreasing the size of the button, or you can use css to add the borders inside the buttons rather than outside.

Example : in CSS, inside #green, add those line :

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

the border will apear inside the div, thus not widening it :slight_smile:

1 Like
3

thanks this fixed it. Ive been ignoring the css resets since I never broke anything I made before without it until now,