Layering one div on top of another div

I have a vision of what I want:

Here is the code I came up with:

HTML

<div class="main_container">
 <div class="team1">team 1</div>
 <div class="vs">VS</div>
 <div class="team2">team 2</div>
</div>

CSS

.team1, .team2 {
    position: relative;
    float: left;
    width: 30%;
    background-color: #FFFFFF;
    border-radius: 8px;  
    z-index: 1;
    height: 50px;
   }

   .vs { 
    float: left; 
    border-radius: 50%;
    background-color: #0099CC;
    z-index: 2;
    width: 100px;
    height: 100px;
   }

   .main_container {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: center;
    border: 1px solid #000;
   }

After implementing this, I ended up with:

(fiddle) Unfortunately, it's not quite right. Any suggestions?

EDIT

To simplify things, maybe I should use a single div and place a circle on top of it:

Would this approach yield better results?

htmlcss

Answer №1

Give this a shot

.vs { 
    position:relative;
    left:0;
    right:0;
    top: 20px;
    margin: auto;
}

Also, remember to include

.main_container {
    margin-top:40px;
}

Check out the latest demo

Answer №2

Utilize display: inline-block and vertical-align: middle;

.team1, 
.team2,  
.vs {
    position: relative;
    display: inline-block;
    vertical-align: middle;
        width: 40%;
    background-color: #D8D8D8;
    border-radius: 8px;  
    z-index: 1;
    height: 30px;
   }   
.vs {    
    border-radius: 50%;
    background-color: #0099CC;
    z-index: 2;
    width: 80px;
    height: 80px;
}   
.main_container {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: center;
}
 <div class="main_container">
      <div class="team1">team 1</div>
      <div class="vs">VS</div>
      <div class="team2">team 2</div>
 </div>

Answer №3

Adjust the team* and vs divs to have a style of display: inline-block; while also aligning them vertically:

.team1, .team2 {
    position: relative;
    width: 40%;
    background-color: #D8D8D8;
    border-radius: 8px;
    height: 30px;
}
.team1, .team2, .vs {
    display: inline-block;
    vertical-align: middle;
    margin: 0 -5px;
}
.vs {
    position: relative;
    border-radius: 50%;
    background-color: #0099CC;
    z-index: 2;
    width: 80px;
    height: 80px;
    opacity: 0.999;
    z-index: 1;
}
.main_container {
    margin: 0 auto;
    width: 80%;
    text-align: center;
    background: #EEE;
}
<div class="main_container">
    <div class="team1">team 1</div>
    <div class="vs">VS</div>
    <div class="team2">team 2</div>
</div>

Answer №4

Your vs-circle design can be achieved without the need for an HTML element:

http://codepen.io/anon/pen/XbKNPB

.main_container {
  background-color: #eee;
  border-radius: 25px;
  margin-top: 50px;
  padding: 20px 40px;
  position: relative;
  width: 400px;
}
.main_container:after {
  border: 1px solid #999;
  border-radius: 100%;
  color: #111;
  content: "vs.";
  font-size: 32px;
  background-color: #fff;
  width: 80px;
  height: 80px;
  text-align: center;
  position: absolute;
  left: 200px;
  top: -20px;
  line-height: 72px;
}
.team1,
.team2 {
  position: absolute;
  top: 10px;
}
.team1 {
  left: 40px;
}
.team2 {
  right: 40px;
}
<div class="main_container">
  <span class="team1">team 1</span>
  <span class="team2">team 2</span>
</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

What is the best way to create a responsive navigation bar design?

I'm trying to create a unique navigation bar that features a hexagon-shaped logo and 3 buttons aligned in a specific way. Check out the screenshot for reference here. Although I've managed to align everything perfectly on a fullscreen (1920x1080 ...

htmlcssnavbarresponsivepositioning

The embedding feature is malfunctioning in the React application

I am trying to incorporate an HTML embed code into my React app. Here is the button within my functional component: import React from 'react' import './SideshiftStyle.css' export default function Sideshift() { return ( <div ...

htmlreactjs

stop automatic resizing of windows

My CSS is written using percentages. I need to maintain the percentages intact. Is there a way to stop the layout from changing when the browser window is resized? I want the percentages to remain unaffected, even when the browser window is being resized ...

javascriptjqueryhtmlcss

If the content on the first page overflows, the header and footer should be repeated

Despite trying other solutions, my question may seem similar to others. In my case, I utilized the header as a static header for printing, a div element as my footer, and a table to display the content. The issue I am facing is that when attempting to pri ...

htmlcssprinting

Is it true that document.execCommand only works with buttons and not links?

Below is the code snippet I am working with: <div contenteditable="true" style="height:100px;width:100px;border:1px solid; " class="editor"></div> <a class='bold' style="height:10px;width:10px;">B</a> $(function(){ ...

javascriptjquerycssrich-text-editor

Avoiding the collapse of the Bootstrap 4 navbar

Having trouble with the navbar collapsing on itself? The issue seems to occur around 1280px window size, but works fine when the window is wider or narrower. https://www.bootply.com/AcsaaqReAL .navbar-custom { background-color: #333333; border- ...

htmlcsstwitter-bootstrapbootstrap-4

Can the input type of an input element inside a table cell be altered by referencing the table cell's id using javascript?

Need help with changing the type of an input element from password to text using JavaScript? The input element is located inside a <td> with the id "pass". Also looking to add a checkbox that toggles displaying or hiding the password value. I'm ...

javascripthtml

Scrolling up the page following the addition of a new row

https://i.sstatic.net/QLBEe.png Description After clicking the plus button in the image above, a new row is created using jQuery autocomplete. https://i.sstatic.net/Xf5Et.png Description The image above illustrates the page displaying when scrolled to t ...

htmlcss

What advantages does using ImageMagick to resize images offer compared to using CSS?

My Ruby on Rails application has a feature that allows users to upload images. I have discovered that Active Storage can utilize ImageMagick to resize images using this code: model.image.variant(resize: "100X100") However, resizing images can also be ach ...

htmlcssruby-on-railsimage-processingimagemagick

In an array where the first 3 images have been filtered using an if statement, how can I show the image at the 3rd index (4th image) starting from the beginning?

In my personal web development project, I'm using AngularJS for the front-end and .NET Core for the back-end to create a website for a musical instrument retailer. The model I'm working with is called "Guitar" and all the guitar data is stored in ...

htmlcssangularimagetypescript

Achieving a full background with Bootstrap 4: the step-by-step guide

Is there a way to ensure that the background completely covers the container? I am working with Bootstrap 4 and have shared my CSS code for the background image below: <div id="form_wrapper" style="background-image:url('img/bg.png&ap ...

htmlcssbootstrap-4

Dynamic Hero Banner

As I work on creating a basic website for my football team, I am facing an issue with the text placement in different screen sizes. While the Jumbotron background image resizes perfectly according to the screen size, the text outside of the Jumbotron doesn ...

htmlcssbootstrap-4media-queries

I'm having trouble grasping the concept of margin collapse in this particular example

It's clear why the margin collapses to 20px in the first example when there's a border on the outer div. However, it is puzzling how the margin collapses to zero in the second example just by removing the border from the outer div. /*First exam ...

htmlcss

What is the best way to integrate HTML code within a JavaScript function?

I need the HTML code to execute only when a specific condition in JavaScript is met. Here is the JavaScript code: <script type="text/javascript"> $(document).ready(function () { if(window.location.href.indexOf("index.php") > -1) { ...

javascripthtml

What are some ways to conceal database connection details for a basic HTML/CSS/JavaScript website hosted on GitHub Pages?

For my current school project, I am utilizing vanilla HTML, CSS, and JS. Once completed, the expectation is for the repository to work through GitHub Pages. Although it's beyond the assignment requirements, I am interested in integrating a Firebase Fi ...

javascripthtmldatabasegoogle-cloud-firestoregithub-pages

show a division once it's clicked

I'm currently facing an issue with a script that I can't seem to solve on my own. Essentially, I am attempting to make a div appear after clicking on the "Products" button. Here is what I have so far: <div id="header"> <div id=" ...

jquerycss

Animation of active chat list items on Whatsapp

Has anyone figured out a simple method to create an animation like the one in Whatsapp? For example, when you are on a chat screen and go back to the chat list, have you noticed how an active element is briefly highlighted in gray (to indicate which chat ...

javascriptcssanimation

Develop an outline using D3.js for the clipath shape

After successfully creating a shape with a color gradient, I encountered the need for further customization. If you are interested in this topic, check out these related questions: Add multi color gradient for different points in d3.js d3.js scatter plot c ...

javascripthtmlangularjsangulard3.js

What is the process for verifying that a checkbox is unchecked through the use of Ajax and PHP?

I am working with a checkbox element in my form. Here is the code: <input type="checkbox" value="yes" id="checkBox"> This checkbox is part of my form, and I am sending the form data to a PHP file using Ajax: var check = $('#checkBox').v ...

phpjqueryhtmlajax

What is the purpose of using the "::before" CSS modifier to display the fontawesome chevron in the specified Bootstrap accordion code?

I stumbled upon a great example of adding arrows to the Bootstrap accordion on CodePen. Check it out: https://codepen.io/tmg/pen/PQVBGB HTML: <div class="container"> <div id="accordion"> <div class="card"& ...

htmlcsstwitter-bootstrapbootstrap-4font-awesome