`CSS border issues`

I am currently attempting to create a square consisting of 4 smaller squares inside, but I have been facing challenges with the method I was using. Here is the code snippet:

#grandbox {
  position: absolute;
  width: 204px;
  height: 204px;
  border: solid thin black;
  left: 40%;
  top: 8%;
}
div.smallbox {
  border: solid thin black;
  text-align: center;
  width: 100px;
  height: 100px;
  float: left;
  line-height: 100px;
}
<div id="grandbox">
  <div class="smallbox"></div>
  <div class="smallbox"></div>
  <div class="smallbox"></div>
  <div class="smallbox"></div>
</div>

My intention was to style the borders in CSS as follows:

border: 2px solid black

However, when I applied this, the boxes broke out of the larger box and were displayed vertically.

I'm relatively new to this field, having recently embarked on my career, so I am struggling to understand why it's not working.

PS: Apologies for any errors in English, as it is not my native language.

htmlcss

Answer №1

Typically, border widths are added to the specified width. However, by using the box-sizing: border-box; rule, you can incorporate the border into the width itself, eliminating any breaks. Take a look at this example:

#grandbox {
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid thin black;
  left: 40%;
  top: 8%;
}
div.smallbox {
  border: solid thin black;
  text-align: center;
  width: 100px;
  height: 100px;
  float: left;
  line-height: 100px;
  box-sizing: border-box;
}
<div id="grandbox">
  <div class="smallbox"></div>
  <div class="smallbox"></div>
  <div class="smallbox"></div>
  <div class="smallbox"></div>
</div>

For more details on box-sizing, visit https://developer.mozilla.org/de/docs/Web/CSS/box-sizing.

Answer №2

UPDATE: My solution may not be the most optimal. It is recommended to refer to the top-rated answer above, which properly accounts for border sizing in width calculations.

It seems that your initial dimensions calculation of 204px did not include the additional 4 pixels on each side of the square.

To address this issue, adjusting both the width and height to 208px should rectify the problem.

#grandbox
    {
        position: absolute;
        width:208px;
        height:208px;
        border: 2px solid black;
        left:40%;
        top: 8%;
    }

div.smallbox
    {
        border: 2px solid black;
        text-align: center;
        width: 100px;
        height: 100px;
        float: left;
        line-height: 100px;

    }
<body>
  <div id="grandbox">
    <div class="smallbox">

    </div>
    
    <div class="smallbox">

    </div> 
    
    <div class="smallbox">

    </div>
    
    <div class="smallbox">

    </div>
  </div>
</body>

Answer №3

To create the desired layout, make sure the outer box is set to have a relative position while the four inner boxes should be set to absolute. Then use the left, right, top, and bottom properties to position them accordingly.

#grandbox {
  position: relative;
  width: 204px;
  height: 204px;
  border: solid thin black;
  left: 40%;
  top: 8%;
}
div.smallbox {
  border: solid thin black;
  text-align: center;
  position: absolute;
  width: 100px;
  height: 100px;
  float: left;
  line-height: 100px;
}
div.sb1 {
  top: 0;
  left: 0;
}
div.sb2 {
  top: 0;
  right: 0;
}
div.sb3 {
  left: 0;
  bottom: 0;
}
div.sb4 {
  right: 0;
  bottom: 0;
}
<div id="grandbox">
  <div class="smallbox sb1">

  </div>
  <div class="smallbox sb2">

  </div>
  <div class="smallbox sb3">

  </div>
  <div class="smallbox sb4">

  </div>
</div>

Check out the live example on jsbin.

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

Adjusting the size and dimensions of a wmv video embedded on a webpage

I am trying to embed a wmv file on my webpage. The issue I'm facing is that I can't adjust the video frame size to fit the object and div dimensions. Here's the code I'm using: <div style="width: 300px; height: 220px;"> ...

htmlembeddingwmv

Tips for showing a public image in-text when pasted on Skype or various social media platforms

As an avid user of Skype, I have discovered that when pasting a link into Skype (using the desktop app) such as a YouTube link, a thumbnail is displayed in the chat. This got me thinking about whether there is a specific class or area in my code, be it CS ...

phpcssskype

When filling options within an optgroup in a selectbox, the data for each option may override one another

UPDATE: I made a change in my code: $('select[name=productSelect]').setOptions(["All products|ALL", "Products visible to all|VISIBLETOALL=1"]); I updated it to: $('select[name=productSelect]').prepend(["All products|ALL", "Product ...

javascriptjavajqueryhtml

Transforming CSS styles into Material UI's makeStyles

My CSS styling was originally like this const Root = styled.div` display: flex; flex-direction: row; margin: 0 auto; width: 100%; position: relative; @media (min-width: ${(p) => p.theme.screen.md}) { width: ${(p) => p.theme.screen.md ...

cssreactjsmaterial-ui

Mastering the Art of Content Swapping in SPA

Hey there! I'm in the process of creating a webpage using tornado io and incorporating various graphs. To add some single page app magic, I decided to swap out content within a div like so: <div id="chartType"> Chart goes here</div> <a ...

javascriptjqueryhtml

Padding needed for floated <li> items in horizontal menu

I'm attempting to design a horizontal top header featuring a main navigation stacked above a sub-navigation. Both navigations are constructed using <ul> elements with floated <li> items. The sub-navigation mysteriously has excess horizonta ...

css

Ways to hide a div element when the size of the window is decreased

I need help with keeping my logo fixed on the header of my website. You can view an example of the issue here: Currently, when the window is resized to a certain height, the logo (The sun) changes position. How can I ensure that it remains fixed in place? ...

htmlcssfixedgraphical-logo

What is preventing me from applying styles to the first word in my Angular ngFor iteration?

I'm currently attempting to customize the initial word of a string within my Angular ngFor loop. Strangely, the class gets applied but the style defined in my CSS file is not. Inline styling also does not seem to work - any ideas why? This is the CSS ...

htmlcssangulartypescript

When clicking, jQuery fails to hide the div

Here is some HTML code for you to check out: <div class="FormContainer" id="FirstFormContainer"> <form> <span> Enter the number of subjects</span></br> <input id="NumberOfSubjects" /></br> <span& ...

jqueryhtmlclickhide

I'm having trouble adjusting the link color in my footer text while navigating Wordpress for the first time

As someone who is new to Wordpress, I am struggling with changing the link color in the footer text. Despite spending hours on it, I just can't seem to figure it out. The files I have been working with are style.css and bootstrap.min.css. I feel lik ...

htmlcsswordpresstwitter-bootstrap

Center-align an input and button vertically within a div

I am facing an issue with aligning my search setup vertically inside a div Below is the code I have written: HTML: <div class="search"> <input class="searchfield" type="text" placeholder="Search..." value="" />&nbsp;<button class="sea ...

htmlcssvertical-alignment

Prevent input element from being included in tab order in Internet Explorer

I’m facing an issue in my Single Page Application built with vue.js. I have a checkbox that needs to be invisible for UX reasons, so I set its opacity to zero. However, even with tabindex set to -1, the input element is still included in the tab order ...

htmlvue.jsaccessibility

ng-bind-html is having trouble parsing the HTML correctly and binding it

Here is the code for my controller: myApp.controller('actionEditController', ['$scope', '$stateParams', '$sce',function ($scope, $stateParams, $sce) { $scope.table="<p>OOPSY</p>"; $sc ...

javascripthtmlangularjs

Issues with Bootstrap Navbar Dropdown functionality, including flickering or unresponsiveness

While working on a project, I incorporated the FlexStart Bootstrap Template. However, I encountered an issue with the Dropdown feature on the navbar. When hovering over the menu and submenu, they flicker incessantly. Despite investing a considerable amount ...

javascripthtmljquerycssbootstrap-5

The requested external js scripts could not be found and resulted in a net::ERR_ABORTED 404 error

import express, { Express, Request, Response } from 'express'; const path = require("path"); import dotenv from 'dotenv'; dotenv.config(); const PORT = process.env.PORT || 5000; const app = express(); app.use(express.static(path.join ...

javascripthtmlnode.js

Iterate through and conduct conditional verification

In my project using AngularJS and HTML, I have created a table to display records. I am looking for a way to iterate through the column values and strike through any value in the column that meets a certain condition. For example, in the demo provided her ...

javascripthtmlangularjs

Rejuvenate your Bootstrap Accordion with these Settings

Using bootstrap documentation, I have implemented an accordion in my web application with the following code: <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class=" ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

jQuery function fails to work on a list that has been dynamically generated

Can someone please assist me? I have encountered an issue where the dynamic list on the second page is not functioning properly. When I click any "li" element to trigger an alert for the respective "id" (which works fine for a hardcoded list), nothing happ ...

jqueryhtmljquery-mobile

Tips for getting my navigation bar menu button functioning properly?

I am struggling to make my button show the menu when clicked. I have tried various methods but still can't pinpoint the issue. I utilized the "checkbox" trick to display the hamburger button when the site width is under 500px for a responsive menu, ye ...

htmlcss

The layout of the keyboard in Cordova has been altered

Just starting out with my first Cordova app and I'm working on a simple login form. The issue I'm facing is that whenever I click on an input element, the keyboard pops up and completely messes up my layout, which should be straightforward. Has ...

javascripthtmlcsscordova