How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

Question

How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

[http://jsfiddle.net/w7r3gveg/]1

I am looking to position 4 Facebook logos in the center bottom of my background image.

The background is represented by the 'bg' div, while the Facebook logo is in the 'facebook' div.

Currently, I can center the Facebook logo within the bg div, but it is not responsive.

My goal is to have the Facebook logo consistently positioned over the bg div, so that regardless of screen width changes made by the user, the logo remains locked in place relative to the bg div.

html css

Answer 1

Answer №1

Check out this solution:

Live Example on JsFiddle

http://jsfiddle.net/46psK/2983/

HTML Code snippet

<div class="responsive-container">
    <div class="dummy"></div>

    <div class="img-container">
        <img src="http://s2.uploads.im/t/8LauQ.png" alt="" />
    </div>
</div>

CSS Styling

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* maintains 1:1 aspect ratio */
}

.img-container {
    background-image: url("http://s2.uploads.im/t/VtT8j.png");
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% auto;
         background-position: center; 
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}

Answer 2

Check out this solution:

Live Example on JsFiddle

http://jsfiddle.net/46psK/2983/

HTML Code snippet

<div class="responsive-container">
    <div class="dummy"></div>

    <div class="img-container">
        <img src="http://s2.uploads.im/t/8LauQ.png" alt="" />
    </div>
</div>

CSS Styling

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* maintains 1:1 aspect ratio */
}

.img-container {
    background-image: url("http://s2.uploads.im/t/VtT8j.png");
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% auto;
         background-position: center; 
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    vertical-align: middle;
    display: inline-block;
}

Answer 3

Answer №2

If you want to enhance your code, consider making the following adjustments. To begin with, eliminate the col-xs-1 class from all .facebook elements in your HTML, as shown below:

<div class="col-xs-6">
    <div class="facebook"></div>
    <div class="facebook"></div>
    <div class="facebook"></div>
    <div class="facebook"></div>
</div>

In your CSS stylesheet, simply include the following:

.bg .col-xs-6{
    text-align: center;
}

.facebook{
    display: inline-block;
}

For a live demonstration of these changes, check out this DEMO

Answer 4

If you want to enhance your code, consider making the following adjustments. To begin with, eliminate the col-xs-1 class from all .facebook elements in your HTML, as shown below:

<div class="col-xs-6">
    <div class="facebook"></div>
    <div class="facebook"></div>
    <div class="facebook"></div>
    <div class="facebook"></div>
</div>

In your CSS stylesheet, simply include the following:

.bg .col-xs-6{
    text-align: center;
}

.facebook{
    display: inline-block;
}

For a live demonstration of these changes, check out this DEMO

How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

Answer №1

Live Example on JsFiddle

HTML Code snippet

CSS Styling

Answer №2

Similar questions

Converting HTML/Javascript codes for Android Application use in Eclipse: A Step-by-Step Guide

Exploring the Intersection of Windows 8 Store Applications and jQuery: Leveraging MSApp.execUnsafeLocalFunction

Error encountered in PHP while trying to move uploaded file

Struggling to repair the unresponsive on-click event even after thorough debugging efforts

Scrolling the Html5 canvas smoothly without the need for constant re-rendering

An element will not automatically wrap text when all anchors are in place

Tips for hiding a div element until its visibility is toggled:- Set the display property of

Android mobile browser lacks visibility of certain elements

Preventing Users from Accessing a PHP Page: Best Practices

Data input not populating in email

Instructions for utilizing the nav-pill with nav-justified components in Bootstrap3x without incorporating any responsive capabilities

What is causing the SVG element to malfunction on iOS devices?

JavaScript is incapable of locating image files

Generate a dynamic text-box and drop-down list using HTML and JavaScript

What is the best way to center align and add an icon to the header in Ionic?

Can you explain the contrast between the functions 'remove' and 'removeChild' in JavaScript?

Is it possible to utilize formatted strings in Python selenium to locate elements based on different categories such as xpath, css, etc?

JavaScript multiplying an array in HTML

Utilizing Z-Index placement in CreateJS

What are the steps to create a dynamic background image that adjusts to various