How can you align half of a circle on the bottom-center of a rectangle in a responsive way?

I'm working on a design where I have a large div taking up the width and some of the height, with a smaller circle that needs to be positioned half at the bottom/center of this div and half right after it. Everything seems to work fine until I increase the height or try to zoom in, at which point the circle starts moving vertically and loses its 50/50 positioning. Additionally, when zooming the page, the circle expands from the top rather than the middle.

Check out my jsFiddle here

    <div id="rectangle">
        <img id="circle" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
    </div>

Css:

body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#rectangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 92%;
    background: #E5E5E5;
}
#circle {
    position: absolute;
    top: 86%;
    left: 0;
    right: 0;
    width: 100px;
    margin-right: auto;
    margin-left: auto;
}

Answer №1

Given that the circle is contained within the rectangle, its positioning is dependent on the rectangle. This means you should adjust the circle's bottom property to be half of the circle's radius:

body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#rectangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 92%;
    background: #E5E5E5;
}
#circle {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    width: 100px;
    height: 100px;
    margin-right: auto;
    margin-left: auto;
    background: none #000;
    border-radius: 50%;
}
<div id="rectangle">
    <div id="circle"></div>
</div>

An HTML element was utilized to generate a circular shape in place of the provided image (which can be removed).

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

Using data fetched from PHP in HTML via jQuery post: A step-by-step guide

I have created a function in jQuery that uses $.post to send data to a PHP file. The query in the PHP file is working fine and returning the data back successfully. JavaScript code: function send_agenda_data(cidade_data){ var data = {'cidade_dat ...

Is it possible for the sum to turn into NaN in Bootstrap Table JavaScript?

I used bootstrap to create a table that links with phpmyadmin. I need to show the total current amount in the table, which should update when using the search function. However, I keep getting NaN as my result. Below is the relevant code: // PART OF CODE ...

Retrieving Checkbox Values in PHP: A Step-by-Step Guide

Question: Retrieving values from a checkbox I am facing an issue with the script below where I am only able to retrieve the last selected value of the checkbox. How can I modify the code to fetch all the selected values for validation purposes? Here ...

Determining the total of input values based on identification number

Can anyone help me figure out how to calculate the total sum of the values entered using IDs? I've been struggling with it and can't seem to get it to work. Your assistance would be greatly appreciated. <input type="number" id=&quo ...

Discover an element using Python Selenium

Can someone assist me in finding a way to click on an image using Python's Selenium? I am trying to locate a div with the class "A" that contains another div with the class "B", and then, click on the img within the div with the class "D" <di ...

Center the table cell element horizontally

Struggling to align a table cell element both horizontally and vertically? Currently, only managing the vertical alignment. The images vary in size, calling for fluidity and compatibility with max-height and width... Custom Style Sheet (CSS) .prod-img { ...

A single image with dual clickable areas managed by an interactive image map

Is there a way to attach two href links to one image using CSS? I want it to function like an old school image map, but purely with CSS. Is this something that can be done? The current HTML code looks like the example below. However, I need the image to h ...

I am having trouble compiling sass in VS Code using the sass --watch command

I've encountered an issue while trying to compile sass through the terminal. Despite having already installed node.js and successfully using Live Sass, I consistently receive the following error message: sass : The term 'sass' is not recogni ...

iPhone height is not correct

One issue I faced was when trying to view a webpage in landscape mode on iPhones (specifically testing on model SE, but it appears that many people are experiencing the same problem with other iPhone models). I have created a simple example below, consist ...

Place the object into a vacant area with the help of jQuery Sortable

I am using jQuery Sortable and it's functioning well. However, I have encountered a small issue that I need help with.    I have two blocks where elements from one block can be moved to the other. The problem arises when all the elem ...

Using Rails to display a set of partials generated by a presenter function

Currently engrossed in watching Railscast on presenters, I find myself eager to refactor one of my presenters to incorporate the page template. The specific screencast that caught my attention is 287-presenters-from-scratch Following the suggested method ...

Vuejs application is not producing the anticipated outcome when an ordered list contains an unordered list

Is there a way to nest an unordered list within an ordered list in vue 2? I've attempted <template> <div class="p-14"> <ol class="numberlist"> <li>An numbered list</li> <li>Cont ...

developing a fluid grid system with flexible ordering

I'm currently working on a section for my app that consists of one row with 3 columns, each column containing 3 divs. JSFIDDLE: demo Here is how it should appear in desktop view: https://i.sstatic.net/ugAXd.png And here is the expected appearance ...

When I adjust the size of my browser, the elements on my HTML page shift around

I'm facing an issue where all my elements move when I resize my browser, and I cannot figure out why. How can I ensure that they stay in their respective positions even when the browser is resized? Is there a CSS solution for this? Thank you! body ...

Aligning two buttons within a div using Bootstrap

Hello and thank you for taking the time to read this! I am facing an issue with Bootstrap where I cannot seem to center 2 buttons inside a div. Currently, the buttons are aligned to the left. How can I get them centered? Here is the code snippet: <d ...

Run a function continuously while a key is being held down

I am currently working on a Javascript program that will move a div up and down based on key inputs. The idea is to continuously update the 'top' style value of the div while a specific key is pressed. While the basic function works, I am struggl ...

How can I ensure that the size of the Dropdown Menu Item matches its parent in both Bootstrap and CSS styles?

I am working on a navigation bar that has a dropdown menu which appears on hover. I want the size of the dropdown menu items to match the size of the parent element. Here is an image for reference: https://i.stack.imgur.com/oNGmZ.png Currently, the "One ...

Achieving Flexbox alignment in a responsive layout

Struggling with achieving a responsive layout using Flexbox. Picture a page filled with panels. The main objective is to display a certain number of panels per row, aligned both horizontally and vertically like the rest. The main issue I am encountering ...

Is there a method to maintain highlighted text on a webpage even after a user has selected it and clicked elsewhere on the page?

Consider this scenario: a user uses their mouse to select the first line of a paragraph, and then later goes on to select another line lower down on the page. How can we ensure that both the previously selected text and the new selection remain highlighted ...

Adjust the mouse position upon page loading

I'm looking for a way to manipulate the mouse pointer on my webpage displaying a full-screen slider. I want the slider to stop when the mouse pointer is over it, but I also want the mouse pointer to be displayed at the top of the page when it's n ...