Creating a footer that utilizes nested divs

Looking to incorporate a footer on my website, but experiencing issues with text shifting positions.

<div id="footer">
  <div id="footerchild">
    <a href=".html">1</a>
  </div>
  <div id="footerchildone">
    <a href=".html">2</a>
  </div>
  <div id="footerchildtwo">
    <a href=".html">3</a>
  </div>
  <div id="footerchildthree">
    <a href=".html">4</a>
  </div>
</div>

Here is the relevant CSS:

#footer {
  margin-left: 100px;
  background: #812;
  box-shadow: 1px 2px 40px 1px #444;
  border: 1px solid black;
  width: 1040px;
  height: 300px;
  position: absolute;
}

#footerchildone {
  float: right;
  margin-right: 500px;
  margin-top: -22px;
}

#footerchildtwo {
  float: right;
  margin-right: 350px;
  margin-top: -22px;
}

#footerchildthree {
  float:right;
  margin-top: -22px;
  margin-right: -250px;
}

The goal is for each column to be centered at a specific distance. However, when moving one child element like "footerchildthree", another element also shifts. Despite having separate divs for each, they seem to move together. What could be causing this issue?

csshtml

Answer №1

Perhaps the solution you seek can be found here:

http://jsfiddle.net/65GaS/5/

It's as easy as that, unless I've misinterpreted your needs.

Answer №2

http://example.com/code

CSS

<div id="header">
<div id="headerchild"><a href=".html">1</a></div>
<div id="headerchildone"><a href=".html">2</a></div>
<div id="headerchildtwo"><a href=".html">3</a></div>
<div id="headerchildthree"><a href=".html">4</a></div>
</div>

CSS

#header
{margin-left: 100px;background: #CCC;box-shadow: 2px 3px 50px 2px #222;border: 2px solid black;width: 1100px;height: 350px;position: relative;}
#headerchild{float:left;width:275px;margin-top: 70px;text-align:center;}
#headerchildone{float: left;width:275px;text-align:center;margin-top: 70px}
#headerchildtwo{float: left;width:275px;text-align:center;margin-top: 70px}
#headerchildthree{float:left; margin-top: 70px;text-align:center;width:275px;}

Answer №3

To ensure that the text is centered within the parent div, include the style text-align:center. Additionally, set each child div to position:relative; display:inline-block; This will automatically center align the content within the parent div. Remove any float:right from the child divs for optimal results. Give this a try and see if it resolves your issue!

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

Utilizing negative margins in Bootstrap for row positioning

The design of Bootstrap rows includes a margin (left and right) of -15px. This is primarily due to two factors: The .container has a padding (left and right) of 15px The col-* classes include a gutter of 15px. To prevent the empty space caused by the g ...

csstwitter-bootstrapbootstrap-4

utilize spans for generating dividers

I attempted to create a border by using the CSS property border: 1px solid #333 within an empty span, but unfortunately I did not see any visible separator. Could it be that there needs to be content inside the span for the border to appear? Is there a way ...

htmlcss

The synchronization of template stamping with the connectedCallback function

Issue Explanation It appears that there is a timing discrepancy with Polymer (2.x) when querying for nodes contained within a template element immediately after the connectedCallback() function has been executed. Ideally, the initial call of this.shadowRo ...

javascripthtmlpolymerpolymer-2.x

Avoid changing the orientation

Despite having a similar title, my question is not a duplicate of Prevent orientation change in iOS Safari. I have modified the code provided below. I have written the following code to automatically rotate the content when a user rotates their iPad/iPhon ...

javascripthtmlcsssmartphone

Creating a dynamic visual effect with image overlap in the Sencha Touch carousel

I've created a carousel that loads multiple images, but I'm experiencing an issue where each image is overlapping with another image from a different card. Here's a visual of the problem: As shown in the screenshot, parts of one image are a ...

csssencha-touchextjscarousel

How to center a full-screen image using CSS with maximum height

As I work on creating a stylish image viewer resembling a gallery, I'm determined to position the image at the center and middle of the page. If the image is smaller than 100% of the page, achieving this alignment becomes as easy as using table and t ...

cssimagealignmentvertical-alignment

I encountered an error stating "loadmodel is not defined" while I was using PHP and a JavaScript file with the type=module

Recently, I ventured into the world of THREE.js and WebGL, trying to load car models. My goal was to trigger a custom function through an onclick event listener that would extract an address from a data- attribute and pass it on to another custom function ...

javascripthtmlecmascript-6three.jswebgl

Basics of CSS border-image explained

Although it seems simple, I'm struggling to figure out what the issue might be. I am attempting to create a div with a specific border on an ASP.Net webpage. CSS: .ResourcesDiv { border-image:url(http://blogrope.com/wp-content/uploads/2013/06/003-w ...

htmlcssborder

What is the proper method for utilizing the calc() function in conjunction with min-content?

My grid layout has a specific design that I'd like to simplify. The goal is for the .side element to initially adjust its size based on the content using min-content, but also allow users to expand it by adjusting the --size custom CSS property. I a ...

htmlcssgrid-layout

What is the best way to open a new window, such as a music player, and integrate it into a Shopify environment

Currently, within my Shopify store, I am using the following code: <script language="javascript" type="text/javascript"> function popupwindow(url, winName, w, h) { var left = (screen.width/2)-(w/2); var top = (screen.height/2)-(h/2); return wi ...

javascripthtmlshopify

PHP error: Index not defined

One challenge I’m encountering is with a dating site form that includes the following categories: firstname,lastname,username,password,email,mysex,yoursex,relationship,date of birth, and country I've completed the PHP code to send information to a ...

phphtmlmysql

Can Webpack be used to produce only CSS files without generating the output.js file?

I've integrated Webpack into my project alongside the extract-text-webpack-plugin. Within my project, I have various build scripts. One of these scripts focuses solely on bundling and minifying CSS. While utilizing Webpack for other tasks, I decided ...

cssnode.jsnpmbundling-and-minificationwebpack

Toggle functionality not functioning correctly when clicking on two elements simultaneously

When I click on the input and the div with class "checkmark", I want the div tag with id "hidden-gift-order" to be hidden. However, clicking on the input works as expected but clicking on the div tag does not. Can someone explain why? function Toggle_Vi ...

javascripthtmlbootstrap-4

Vuejs unstyled content flash

I encountered an issue while loading a page with Vue. Initially, I am able to access variables like @{{ value }} but once the page is fully loaded, the variable becomes invisible. How can I resolve this issue? I have already included Bootstrap and all scri ...

javascripthtmlvue.js

Utilize React to float the Material UI SwipeableDrawer component to the right side of the screen

I'm currently working on a project that involves using material UI alongside React/Redux. There has been a recent change in the Figma file where the SwipeableDrawer component is now positioned on the right side of the screen instead of the left. I&apo ...

cssreactjsuser-interfacematerial-uijsx

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Currently, I am working with ReactJS and incorporating MaterialUI components library into my project. However, I have encountered a problem with the Typography component. When I input a long text, it overflows its container without breaking onto a new lin ...

javascripthtmlcssreactjsmaterial-ui

jQuery's ability to load pages seamlessly is unmatched

My website is filled with images, and in order to speed up the loading time, I added a loading screen. Currently, it's a white overlay with the following CSS: #loader{ width: 100%; height: 100%; position: fixed; z-index: 9999999999999 ...

jquerycss

What is the best way to establish a minimum width in pixels and a maximum width determined by the variable width of the browser window?

In this scenario: http://jsbin.com/anoyik/edit#preview http://jsbin.com/anoyik/edit#source Is there a way to make the red box's width a minimum of 200px and allow it to expand as the browser window's width increases horizontally? ...

css

Vue2 data vanishing mysteriously

I created a basic webpage using vue2 to convert binary numbers to decimal. However, I encountered an issue where the data disappears when submitting the binary value in an HTML form. <template> <div class="bar"> <input id="str" t ...

javascripthtmlvue.jsvuejs2

Discover the latest CSS styles and HTML attributes that impact the dimensions of an image

I am in the process of developing a custom jQuery plugin that will enable me to easily change the "src" attribute of an image on my website based on the width of the browser. However, I've encountered an issue where when the new image is loaded, the ...

javascripthtmlcss