Aligning content in the footer vertically

After receiving help previously, I found my work to be extremely disorganized, making it difficult for me to follow someone else's progress. Currently, I have managed to align my content vertically, but now my footer is being cut off halfway and my social icons are incorrectly positioned next to the powered by text instead of floating to the right as intended...

Check out the code here

HTML

<div id="footer">
 <div id="footerContent">
 <div id="leftFooter">
 $POWERED_BY$
 </div>
 <div id="rightFooter">
 <a href="#"><img src="http://zevoxa.com/images/social/facebook.png" /></a>
 <a href="#"><img src="http://zevoxa.com/images/social/twitter.png" /></a>
 <a href="#"><img src="http://zevoxa.com/images/social/youtube.png" /></a>
 <a href="#"><img src="http://zevoxa.com/images/social/deviantart.png" /></a>
</div>
</div>
</div>

CSS

#footer {
 background-image:url('/images/footer_bg.png');
 bottom repeat-x;
 height: 110px;
 display:table-cell;
 vertical-align: middle;
}
#footerContent {
 display:table;
 width:100%;
}
#leftFooter {
 float: left;
 font-family:maven;
 font-size: 15px;
 padding-left: 20px;
}
#rightFooter {
 float: right;
 text-align:right;
}

Answer №1

To adjust the layout, modify your CSS code in the following manner:

#footer {
    background-image:url('http://zevoxa.com/images/footer_bg.png');
    bottom repeat-x;
    width:100%;
    height: 110px;
}
#footerContent {
    display:table;
    width: inherit; /* Adjust based on design considerations */
    height: inherit;
}
#leftFooter {
    display:table-cell;
    vertical-align: middle;
    font-family:maven;
    font-size: 15px;
    padding-left: 20px;
    border: 2px dotted yellow; /* Highlight edges */
}
#rightFooter {
    display:table-cell;
    vertical-align: middle;
    text-align:right;
    border: 2px dotted yellow;
}

View Fiddle: http://jsfiddle.net/audetwebdesign/Pfrj8/

Ensure that #footerContent has a display property of table and inherits its height from the parent element (#footer). The width can be adjusted as needed. In the example, it is set to full width by default.

For the child elements, set their display type to table-cell, apply vertical-align: middle, and maintain correct text alignment. By default, the cells will share equal width of 50% each.

Avoid using floats for this purpose.

Sidebar

You may omit the two wrappers, #footer and #footerContent, unless the second div serves another function (such as an additional background image). Consider your overall design needs. (Refer to alternate example in the fiddle.)

Answer №2

In the case that your website is not designed to be responsive, all you have to do is specify a width like this: #footer {width:500px;}

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 could be causing the Bootstrap collapse feature to malfunction?

<nav id="na-vrh" class="navbar navbar-expand-lg navbar navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> < ...

What are the steps to incorporate jQuery Mobile features into a simple webpage?

Recently, I utilized Adobe Dreamweaver CC 2014 to create a jQuery Mobile Webpage. While exploring its features, I discovered a unique capability within the jQuery Mobile Website. This particular webpage was connected to the necessary jQuery CDNs. What stoo ...

Adjusting the width of a button can result in gaps forming between neighboring buttons

I am currently working on a calculator project that involves customizing the width of a specific button with the ID equal. However, when I adjust the width of this button, it results in unexpected spacing between the third and fourth buttons in each row, c ...

What is the best way to showcase two data frames side by side in an HTML template or webpage without using frames?

Is there a way to showcase two data frames side by side in an html template? <h3> TITLE </h3> {{stat1 | safe}}. {{stat | safe}} I attempted the above solution, but unfortunately it only displays the data frames vertically stacked instead of ...

Navigating Up a Directory with JQuery

Is there a way to navigate up one directory level in my jQuery code? The code below is referencing a folder named "uploads" on the C drive, but I can't find any mention of "uploads" in my HTML. How does it know to look there? And how can I go back to ...

Make sure to maintain the hover effect even after clicking

How can I make my div retain the hover effect even after clicking on it? Here is the code snippet: #work_btn{ position:absolute; top:60%; left:60px; color:grey; background: -webkit-linear-gradient(0deg, #ff956c, #ff3644); -webkit-background-clip: text ...

Creating a volume shadow effect with CSS is a great way to add

Can anyone help me achieve a shadow effect like the one shown in this image example? I've attempted to use the after pseudo element, radius, and clip, but haven't been able to get the desired result. https://i.sstatic.net/pqUtb.png .page{ w ...

Using AJAX and Perl to dynamically update HTML content

Currently, I am attempting to dynamically update a div on my website using ajax and perl. The current implementation I have sort of works but needs improvement. HTML: <h2 id="cpu">--</h2> JS/ajax call: $.ajax({ type: 'GET&apos ...

javascript obtain a query string for submission by a form

Suppose you have a form, such as <form id='testform' method="post" action="/" /> <input name="test1" value="yes" type="text"> <input name="test2" value="no" type="text"> </form> Is there a way to retrieve the query s ...

What is the correct way to write the syntax for wp_register_style function in

I'm attempting to include a cache-buster version in my CSS file. The guides mention: <?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?> However, I've scoured Google and Stack Overflow for the correct formatting of these var ...

Whenever I adjust the size of the div tag, it automatically shifts to the left and loses its responsiveness on mobile devices

This custom class has been created to adjust the size of the div tag and add margins in order to center the elements within the div. .adjust-width { width: 900px; position: center; margin-top: 50px; margin-bottom: 100px; margin-right: 150px; ...

Achieving Content Alignment Using CSS

I successfully implemented a design on my HTML page that divides it into three sections vertically, with each section having a different background color - white, gray, and black. The backgrounds stretch the full width of the page regardless of screen reso ...

Field input displacement

I am experiencing an issue with my contact form, specifically with the message subject field displayed as a menu. The problem only seems to occur on wide desktop displays, where it appears offset from the rest of the form. Despite my efforts to troublesho ...

Tips on extracting the value from the chosen option in 2 separate rows with identical IDs

While looping through my table, each row is identified by the id="batchNo". I am trying to retrieve the selected value of each select option in every row. Although I attempted to achieve this with the provided code snippet, it only retrieves the selected ...

Web application using HTML5, AJAX, and a manifest file for offline usage

Looking for help with an issue on my website: Currently trying to put it offline. Using the manifest file: Encountering an issue with the left and right arrow navigation while offline. The browser shows an xmlhttprequest error, similar to the one found ...

Changing text size on the fly with CSS

Here are the HTML and CSS codes I am currently using: HTML : <div> <a href="#">ITALIANO</a> <a href="#">ENGLISH</a> <a href="#">FRANÇAIS</a> <a href="#">DEUTSCH</a> </div> CSS ...

After exiting the PWA, the IOS camera displays a black screen

I have implemented an HTML file input to open the camera and capture photos for my Progressive Web App (PWA). <input type="file" accept="image/*" capture="camera" name="photo" id="photo-input-js" data-project-id="<?php echo $projectId ?>"> // ...

Guide on integrating JSON data into Bootstrap 4's secondary dropdown menu

I have a vision of my desired outcome in the attached image. Each menu item should contain two additional items, 'Dashboard' and 'Battery Trends', each with unique URLs defined as 'navigationurl' in the JSON file. My attempt ...

Is there a way to mix up the sequence of information when replying?

There have been numerous instances where this question has been raised and addressed, such as here, here, and here. However, those discussions pertained to Bootstrap 4, which is approaching its End of Life as of today, 2021-10-20. Given that Bootstrap 5 i ...

Issue encountered while trying to interpret Bootstrap 4 within Netbeans 8.2

Currently, I am working on an HTML5/JS application using Node.js in Netbeans 8.2. As I develop the welcome page, I intend to incorporate Bootstrap 4. However, when I attempt to add bootstrap.min.css to my stylesheets folder, I encounter an error as shown i ...