What is the best way to position four circles within a square container using CSS?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circles {
  height: 150px;
  width: 150px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
</style>
</head>
<body>

  <h1> Circle Creation </h1>
  <span class="circles"></span>
  <span class="circles"></span>
  <span class="circles"></span>
  <span class="circles"></span>
</div>

</body>
</html>

I am attempting to design 2 circles at the top and 2 at the bottom using CSS. All 4 circles must be contained within a square box with colored backgrounds. Any suggestions to enhance this layout?

htmlcss

Answer №1

Make sure to enclose all your div elements within a container

<div class='container'>
  <span class="circles"></span>
  <span class="circles"></span>
  <span class="circles"></span>
  <span class="circles"></span>
</div>

Change the display of the container to grid with 2 columns

.container {
  display:grid;
  grid-template-columns: 150px 150px;
  padding: 20px;
  background-color: red;
  width: min-content;
}

By setting the width to min-content, the container will resize to fit its content

For the complete solution, refer to the code snippet below 

.circles {
  height: 150px;
  width: 150px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.container {
  display: grid;
  grid-template-columns: 150px 150px;
  padding: 20px;
  background-color: red;
  width: min-content;
}
<h1> </h1>
<div class='container'>
  <span class="circles"></span>
  <span class="circles"></span>
  <span class="circles"></span>
  <span class="circles"></span>
</div>

Answer №2

         <!DOCTYPE html>
          <html>

           <head>
          <meta name="viewport" content="width=device-width, initial- 
           scale=1">
<style>
    .circles {
        height: 150px;
        width: 150px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
    }

    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;


    }
   </style>
 </head>

 <body>

 <div class="container">
    <span class="circles"></span>
    <span class="circles"></span>
    <span class="circles"></span>
    <span class="circles"></span>
  </div>

  </body>

  </html>

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 CSS method for determining the distance from the top of a container to the edge of the window?

I am working on a basic HTML layout that contains a few elements, including a scrollable div container located below them. Since the height of unknown-height is uncertain due to dynamic element generation, I need a simple method to enable scrolling in the ...

htmlcss

Change in navigation bar appearance on scroll down

I am attempting to create a fixed navigation bar by customizing the Bootstrap CSS file. The goal is to change the navbar's color and make it stick to the top when scrolling down. Although I followed the instructions in this article, the JS code I add ...

css

Using jQuery to generate a JSON object dynamically based on the values entered in each input field

I'm facing a situation where I need to extract data from a JSON format using PHP. However, I'm struggling with how to structure the Javascript object in order to dynamically create the JSON format. Here is my current scenario: <input title=" ...

javascriptjqueryhtmljson

What are the steps for implementing responsive design animation in my particular scenario?

Can someone please help me with a strange bug in Chrome? I am trying to create a responsive design for my app. The width of the 'item' element should change based on the browser's width. It works fine when the page first loads in Chrome, b ...

javascripthtmlcssanimation

The hyperlink in the HTML code is malfunctioning

While working on a Wix website, I encountered an issue with the code snippet below: // JavaScript var countries = [ { name: 'Thailand', link: 'www.google.com' }, { name: 'Tanzania', link: '' }, { name: &ap ...

javascripthtmlcss

Tips for validating a form with the assistance of jQuery

While there are multiple answers out there for this particular question, I am specifically interested in validating an entire form with dynamic input fields sourced from a database similar to Google Forms. HTML <div class="rs_card"><spa ...

javascripthtmljqueryvalidation

Have an overlay on a specific area of the webpage while ensuring the remaining sections remain interactive to the user's inputs

Looking for a way to add an overlay in a specific area of a webpage without blocking the other sections? I attempted to use the LightBox feature from primefaces components, but it didn't give me the desired result. I'm struggling to keep the unco ...

cssjsfprimefaces

Challenges with resizing floating divs

As a beginner in Web Development, I am tasked with creating a web portfolio for an assignment. In my design layout, I have a navigation bar in a div floated left, and a content div floated right serving as an about me section containing paragraphs and lis ...

htmlcsscss-floatwindow-resize

Setting the z-index to place an absolutely positioned element below a relatively positioned one

I am currently facing a challenge where I need to position an element under another one that has already been relatively positioned. The blue box must remain relatively positioned due to specific constraints within the website development process. For bet ...

cssz-indexcss-position

Creating multiple unique custom attributes for a specialized HTML element

Creating getter/setter methods for a custom attribute on a custom HTML element is quite simple: customElements.define('custom-el', class extends HTMLElement { static get observedAttributes() { return ['customAttr'] ...

javascripthtmlecmascript-6web-componentcustom-tags

What is the process for generating a GET request for selected checkboxes and subsequently showcasing the data on an HTML webpage?

Currently working on an app project and need assistance with implementing a feature. I have successfully set up a POST method for the checkboxes that are checked, but I am unsure how to retrieve this data and display it on my HTML page using a GET method ...

javascripthtmlajaxcheckboxget

Retrieving a specific view by utilizing the primary key in the URL pattern

Greetings. I am facing some difficulties in retrieving the URL with the passed argument (pk). An error occurs where I receive post_edit, which is related to another application on the website. Here is the error message: NoReverseMatch at /questions/questi ...

pythonhtmldjango

Created an HTML and PHP form, but struggling to pinpoint the issue

I created a form to send data to an email address. However, after filling out the form and submitting it, the browser displays the following message: Server error. The website encountered an error while trying to access http://localhost/process.php. Be ...

phphtml

The Google Pie chart is displaying outside of the designated div area when placed inside a dropdown menu

Encountering an issue with my pie chart rendering outside of its parent div when placed within a dropdown menu. The chart successfully loads after the page is loaded, but only displays correctly if I hover over the dropdown and allow it to load. If I do ...

javascriptjqueryhtmlcssgoogle-pie-chart

Is it possible for me to convert my .ejs file to .html in order to make it compatible with Node.js and Express?

I have an index.html file and I wanted to link it to a twitter.ejs page. Unfortunately, my attempts were unsuccessful, and now I am considering changing the extension from ejs to html. However, this approach did not work either. Do .ejs files only work wit ...

javascripthtmlnode.jsexpress

Enhance your SVG with a stylish border by adding a decorative

Is there a way to add a blue or black border that follows the curve of an SVG used as a divider? <svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" prese ...

htmlcsssvg

Center-align the text vertically in relation to the icon

A query has arisen, regarding a div that contains text and an icon. The issue at hand is that on larger screens the text is not vertically aligned in the center. For further reference, please visit this bootply link: http://www.bootply.com/CHKeRxKOX6 http ...

htmltwitter-bootstrapcss

Can a div with float: left; be centered?

Currently, I am attempting to create a dock (similar to the iOS dock) for my website. Below is the full code that I have implemented: function addPrevClass(e) { var target = e.target; if (target.getAttribute('src')) { // check if it is img ...

javascriptjqueryhtmlcss

What is the best way to center a Bootstrap 4 navigation menu horizontally?

The alignment of the navigation is causing a bit of confusion. I've attempted to set the links to navbar-brand, but while this centers them, it also causes other elements to shift slightly downward. Additionally, it's puzzling why the select opti ...

csstwitter-bootstrap

Jquery unresponsive in AJAX form output presentation

I recently delved into the world of jquery and AJAX, and while I grasp most concepts, I'm struggling with a small code snippet. On my webpage, there is a summary of articles. Clicking on an article name triggers a popup window with detailed informati ...

javascriptphpjqueryhtmlajax