Ways to align a DIV in the center of another DIV?

I am currently working on building a footer.

My goal is to center the 4 divs in the footer, similar to the first paragraph or the 5 icons that are not rendering correctly. What would be the most effective approach to achieve this?

Demo: http://jsfiddle.net/8q5ek/3/

CSS:

#insidefooter, #disclaimer {
max-width: 960px;
min-width: 960px;
margin-left: 25%;
margin-right: auto;
}
#footer {
color: #C9C9C9;
min-width: 1500px;
background-color: #2d2d2d;
list-style: none;
height: 450px;
background-image:url(http://i.imgur.com/yb7j6PD.png);
background-repeat:repeat;
}
#insidefooter {
margin-top: 20px;
text-align: center;
}
/*settings for social media buttons*/
 #insidefootertermsplusbuttons li {
display: inline;
color: #C9C9C9;
}
#insidefooterone1 h5, #insidefootertwo1 h5, #insidefooterthree1 h5, #insidefooterfour1    h5 {
text-align:left;
margin-bottom: 0;
padding-bottom: 0;
color:#FFFFFF;
padding-left: 0px;
}
#insidefooterone1 li, #insidefootertwo1 li, #insidefooterthree1 li, #insidefooterfour1 li {
list-style: none;
text-align: left;
margin-left: 0;
color: #C9C9C9;
padding: 0;
}
#insidefooterone1 ul, #insidefootertwo1 ul, #insidefooterthree1 ul, #insidefooterfour1 ul {
list-style: none;
text-align: left;
padding-left: 0px;
padding-right: 0;
color: #C9C9C9;
overflow: hidden;
}
#disclaimer {
margin-top: 20px;
font-size: 9px;
text-align: center;
margin-bottom: 0;
}
#disclaimer p {
text-align:center;
color: #C9C9C9;
}
.ul_links {
overflow: auto;
display: inline-block;
min-width: 700px;
}

Answer №1

I successfully resolved the issue you were facing. After experimenting extensively with your code, making numerous modifications, I have achieved the following result:

http://jsfiddle.net/rYjS9/7/

The key solution involved utilizing display: inline-block;,

margin-left: auto; margin-right: auto;
, and implementing some other adjustments as evident in the jsfiddle provided. ;)

Best regards

Answer №2

view the demo

clear out unnecessary code

#footer {
    color: #C9C9C9;
    min-width: 1500px;
    background-color: #2d2d2d;
    list-style: none;
    height: 450px;
    background-image:url(http://i.imgur.com/yb7j6PD.png);
    background-repeat:repeat;
    margin: 0 auto;
}

Answer №3

Eliminate the following code snippet and

#insidefooter, #disclaimer {
    max-width: 960px;
    min-width: 960px;
    margin-left: 25%;
    margin-right: auto;
}

Insert the code below

#insidefooter, #disclaimer {
    max-width: 960px;
    min-width: 960px;
    margin 0 auto;
}

Answer №4

After some troubleshooting, I finally cracked the code. Appreciate all the help and responses, but unfortunately, none of them managed to fix the problem caused by a grid system (which was messing up the footer).

The solution turned out to be adding a position: relative to the ul-links and manually setting its position:

.ul_links{
   overflow: auto;
   display: inline-block;
   min-width: 700px;
   position: relative;
   left: 120px;
}

It may not be the most elegant approach, but it did the trick in resolving the issue.

Check out the demo here

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

Retrieve HTML elements from a string using PHP

Possible Matches: crawling a html page using php? Best methods to parse HTML I am trying to extract DOM elements from a string variable in my PHP script that contains an HTML page. How can I achieve this? For instance, if the string is something ...

Utilizing JavaScript to dynamically set a CSS file from an API in AngularJS

I am currently facing an issue with integrating a CSS file returned by an API into my entire website. Since the URL of the CSS file keeps changing, hard coding the URL is not feasible. While I have successfully implemented this on 'view1', my goa ...

Creating a dynamic table accordion with PHP and MySQL

I am currently working on creating an accordion table to display data retrieved from a database. I want the description data to be shown in a row below when clicking on the respective row. Despite my efforts in modifying various code snippets that I have c ...

Use CSS to manipulate the dimensions of an overlay

Looking for a way to ensure that the height of your overlay matches the height of your carousel, even on smaller screen sizes? The HTML code below demonstrates how to combine simple HTML with a Bootstrap carousel featuring three images, along with an overl ...

The speed of the Ionic app is disappointingly sluggish on devices, causing significant delays

After testing my app in Ionic Lab, it runs smoothly. However, when I create the apk file and install it on my device, the performance is very slow. There are delays in clicking on buttons, pushing pages, opening modals, and closing modals. It seems like t ...

What is the proper way to utilize CSS animation delays in order to design a collapsible HTML container?

I'm trying to implement responsive CSS animation delay to create an accordion effect when a user clicks on an arrow associated with a table, all without using JavaScript and only utilizing HTML/CSS. Check out the mobile view in action here: https://w ...

Please disregard clicking on see-through areas of images

Currently working on a game project that involves layering multiple images (tiles) on top of each other to create a sense of depth. However, I have encountered an issue when attempting to click on these overlapping tiles. Due to their transparency, click ...

Having issues with floats in Bootstrap?

I'm facing an issue trying to float two elements within a Bootstrap navigation bar, but for some reason it's not working. .cls1 { float: left !important; } .cls2 { float: right !important; } <link href="https://maxcdn.bootstra ...

Tips for customizing ngTable with expandable detail panels

I am currently working on styling a layout using ng-table, which includes a table within each row. The expanding functionality in Angular is implemented as follows: <tr ng-if="org.expanded" ng-repeat-end> <td></td> <td></td& ...

Imagine a webpage with a width of 1000 pixels. Can you determine the precise horizontal position (from the left) of the div element with the unique id of "inner_div"?

Hello everyone, I hope you're doing well. I recently took a test and unfortunately got this question wrong. Imagine a web page with a width of 1000px. What is the exact horizontal (from the left) position of the div element with id "inner_div"? < ...

Setting a const value (true or false) based on the size of the window - a step-by-step guide

While studying, I encountered a challenge: In the code below, I need to dynamically set useState(false) based on the screen size. If the screen is larger than 947px, for instance, it should automatically be changed to true. The issue arises because sett ...

Is it possible to place a div element from an aspx page into the div of an html page?

Currently, I am faced with the challenge of loading a specific DIV from an ASPX page into an HTML page. The ASPX page tends to load slowly, while the HTML page loads much faster. Therefore, I am attempting to display the DIV that takes time to load from t ...

Utilizing CSS in JS for nested hover styles with Material UI: a step-by-step guide

I am currently utilizing Material UI and in the process of converting regular CSS classes into a JavaScript file. .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } .navItem { float: left; flex: 1; } .navLin ...

Is it possible to disable a function by clicking on it?

I currently have a website that is utilizing the following plugin: This plugin enables an image to be zoomed in and out through CSS transforms, with default controls for zooming in and out. My goal is to incorporate a reset button that returns the image ...

Tips for making sure a header is consistently at the top of every page during printing

I need help with my website - I have a table that is quite tall and spans across multiple pages when printing. Is there a way to make the header row appear on top of each page when printing? ...

Upon script load, a random item from an array will be displayed and recorded in a separate array

I'm working on a fun code project where I aim to display random animal names in different colors that change when a specific keyboard key is pressed. The challenge I'm facing is that the first random animal name in a random color only appears aft ...

Dropbox menu within an extended webpage

I am looking to create a dropdown menu that behaves like the one on this website. The goal is for the dropdown to cover the entire webpage, hide the scroll bar, and "unmount" the other elements of the page, while still displaying them during the transition ...

Angular routes cause a glitch in the Bootstrap navbar, causing it to shift to the left on certain active

Apologies for the simple question, I am new to web design and couldn't find a solution even after extensive googling and searching. The issue I am facing is that when clicking on "EX5" or "EX6" in my navbar, it shifts to the left side of the screen i ...

Rails Polymer is experiencing a glitch where the CSS and Polymer elements are not displaying correctly until a page refresh is

Whenever I first load a page, my polymer elements (like paper-input) fail to load their CSS properly. Here is an example of how the page looks before and after refreshing: https://i.sstatic.net/vsIpE.pnghttps://i.sstatic.net/YAFjP.png Below is the code sn ...