Create two divs that have a width of 50%, forming perfect squares

Is there a way to create two div elements like these?

  • Even if the gray area shrinks, the two div elements will remain visually consistent.

  • While I can use box-sizing: border-box; and padding: 50% 0; in the red box, I need to include text in the blue box.

https://i.sstatic.net/jL8uO.jpg

.c {
  padding: 10px;
  background-color: gray;
  overflow: auto;
  margin: 0 0 10px 0;
}
.c1 {
  width: 300px;
}
.c2 {
  width: 200px;
}
.w {
  width: 100%;
}
.w div {
  float: left;
}
.i {
  width: 50%;
  height: 50px;
  background-color: red;
}
.t {
  width: 50%;
  height: 50px;
  background-color: blue;
}
<div class="c c1">
  <div class="w">
    <div class="i"></div>
    <div class="t"></div>
  </div>
</div>
<div class="c c2">
  <div class="w">
    <div class="i"></div>
    <div class="t"></div>
  </div>
</div>
htmlcss

Answer №1

Is this what you're looking for?

.box {
  box-sizing: border-box;
  padding: 50% 50% 0 0;
  width: 50%;
  float: left;
  position: relative;
}
.image {
  background: red;
}
.text {
  background: blue;
}
.text > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  color: white;
  padding: 50% 0;
  line-height: 0;
  text-transform: uppercase;
}
<div class="container">
  <div class="box image"></div>
  <div class="box text">
    <div>text</div>
  </div>
</div>

Answer №2

.rectangle{
    width: 50%;
    
    position: relative;
    float: left;
}
.rectangle:before{
    content: '\0020';
    padding-top: 100%;
  
    display: block;
}
.container{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#box1{
    background: aquamarine;
}
#box2{
    background: lightcoral;
}
#picture{
    width: 100%;
    height: 100%;
    position: relative;
}
.center{
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    -webkit-transform: -webkit-translate(-50%, -50%);
       -moz-transform:    -moz-translate(-50%, -50%);
            transform:         translate(-50%, -50%);
}
<div id="container">
   <div class="rectangle">
      <div class="container" id="box1">
          <img id="picture" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png"/>
      </div>
   </div>
   <div class="rectangle">
      <div class="container"  id="box2">
          <p class="center">
          Feel free to add your text here!
          If you prefer it not centered,
          simply remove the class "center"!
          </p>
      </div>
   </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

The navbar slide toggle is supposed to slide behind the navbar, but instead it slides in front of

Recently, I created an animated navbar that works perfectly fine. However, there is one issue that bothers me - when the list of menu items slides open, it appears in front of the navbar instead of behind it. If you'd like to see the problem in actio ...

jqueryhtmlcss

What method is most effective for loading HTML content depending on the device being used?

Looking for the optimal method to load different div elements based on the device accessing my website without relying on user agent checks. As of now, I am utilizing CSS media queries to determine device specifications and display the appropriate div acco ...

htmlcss

Retrieve user input from an HTML form and pass it as a parameter in a jQuery AJAX request

Is there a way to pass a value from a user input in an HTML file to jQuery.ajax? Take a look at the code snippet from my JS file: jQuery(document).ready(function() { jQuery.ajax({ type: 'POST', url: 'myurl.asp ...

javascriptjqueryhtmlajax

Adjust the size of the input form

Trying to create this design: https://i.sstatic.net/rPSiN.png But currently stuck with this layout: https://i.sstatic.net/3k5bE.png I'm puzzled on how to resize the input field with an icon on the right while using col-md-12... Check out my code ...

htmlcssreactjsreact-css-modules

What is the best way to alter the background of a div when hovering over an image?

I am looking to achieve a unique effect with my thumbnail image and background. Currently, I have the thumbnail image inside a div with another image serving as the background to frame it. My goal is to change the position of the background image from bott ...

jquerycss

When adjusting the size of the browser window, the div on my web page shifts to the bottom, creating a large empty space at

I have encountered an issue where, when I resize the browser window, my div moves to the bottom and leaves a large space at the top. I would like the div to remain in the center of the page, even if I resize the window to be smaller than the size of the ...

htmlcss

The Jquery .remove() function will only take effect after the second click

I am currently working on implementing a notifications feature using bootstrap popover. The issue I am facing is that after a user clicks on a notification, it should be removed. However, for some reason, it requires two clicks to actually remove the notif ...

javascriptjquerycsstwitter-bootstrappopover

What is the best way to switch the background color of a dropdown div when hovering over it?

I've been working on getting the color to fill the entire dropdown area based on the text you're hovering over, but it's only filling the space around the word. I've set up a Fiddle to demonstrate the issue I'm facing. I'm ne ...

htmlcsshover

Struggling with the grid layout in percentage and feeling perplexed

As I delve into the world of grid systems, I find myself grappling to comprehend it fully. The complexities can sometimes leave me feeling inadequate in my understanding. From what I gather, a 12-column grid system without any margins means that the 12th ...

htmlcsslayoutgrid

Locating an element outside of a class using jQuery

I am trying to target the initial element that matches my criteria OUTSIDE of my container. Even though I can easily find it when it's inside, I struggle when it's outside. My goal is to specifically select the very first element it discover ...

javascriptjqueryhtml

Tips for effectively placing a page scope block using BEM

Here is the current structure of my header. The page component is assumed to be the root. Currently, the geometry of the social-links block is being controlled by the header__social-links mix (positioned absolutely relative to the header). How can I prop ...

htmlcssbem

An easy guide to animating multiple sections of progress bars individually in Bootstrap

My Bootstrap code successfully animates a section of progress bars when the user views it. However, it currently animates all progress bars on the page rather than just those in the viewed section. This means that when the user moves to another section, th ...

javascriptcsstwitter-bootstrap-3progress-barjquery-waypoints

How can I design a custom status update box inspired by the look and feel of Facebook

I have searched extensively online for a guide on creating a CSS box similar to Facebook's status update callout box. This box features a square shape with a small notch at the top. Could someone assist me in crafting a CSS design for this type of bo ...

csscallout

Simple method for creating a custom webfont using .png images

One of the designers in our team has given me an icon set in the form of .png files (each in 1x and 2x resolution) that I am considering converting into a webfont. Do you have any recommendations on the best way to accomplish this task? ...

cssiconswebfonts

How can I ensure that the div remains fixed on scroll and appears directly below the navigation bar, rather than at the top of the page?

There is a div (#callback) that loads asynchronously via ajax upon submit, for updating or deleting an item. It appears as the green message box at the top of the page. Click here to see image and this is how it looks when "scrolling": Check out the scrol ...

javascriptjqueryhtmlcss

Combine div elements with identical class

Is there a way to utilize jQuery in order to enclose groups of elements with the same class within a div? I have been searching for a solution, but haven't found one yet. Here's an example of the HTML: <div class="view-content"> < ...

javascriptjqueryhtmlclasswrapall

Arranging the R shiny selectInput controls in the correct position

I am looking for help with adjusting the position of two selectInputs in my R Shiny script. Currently, the dropdown is not appearing clearly and I've tried using padding without success. I have attached a snapshot for reference. Any assistance would b ...

cssrshinyshinydashboard

Switching the focus of detection from a child to a parent

I am currently working on enhancing the functionality of my UI to display selections dynamically as they are selected or de-selected. import { Wizard } from './report-common'; import { Router } from '@angular/router'; import { DataServ ...

htmlangulartypescriptdata-bindingangular5

Utilize ng-repeat to iterate over two arrays

Two arrays are at my disposal here. The first array contains option content, while the second array consists of option tags (i.e., A, B, C, D). How can I structure the layout for the 'input type="radio"' using ng-repeat? To start off, I am attem ...

javascripthtmlarraysangularjs

Tips for seamlessly transitioning the background of Google Maps into view as you scroll down the page

I have a unique background with a Google Map. It loads perfectly in the right place when I open the page, but as I scroll down, it disappears from view. Is there a way to keep the Google map constantly in the background, even when scrolling? This is my cu ...

javascriptjqueryhtmlcssgoogle-maps