What is the Best Way to Align Footer Text on both the Right and Left sides?

I'm having trouble aligning text on both sides of my footer. The text on the right keeps falling to the next line, and I want it to be on the same line as the text on the left. Any suggestions or tips would be greatly appreciated! Thank you in advance for your help!

If you need to take a look at my code, here's the link: http://jsfiddle.net/kc6AL/

HTML Code:

<!--Footerline-->
<div id="footerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>
<!--Footer-->
<div id="footer">
<h3 class="copyright">Copyright Stuff.</h3>
<h3 class="social">Social Links.</h3>

CSS Code:

#footerline {
    width: 100%;
    overflow: hidden;
    margin: 5px auto 10px auto;
    text-align: center;
}

#footer {
    max-width: 980px;
    text-align: center;
    margin: auto;
}

h3 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #000;
    text-transform: uppercase;
}

.copyright {
    text-align: left;
}

.social {
    text-align: right;
}

Answer №1

I've created a modified version of your jsfiddle:

http://jsfiddle.net/82ZU8/

The important aspect here is to utilize the float property on the <h3/> elements

CSS

.copyright {
    float: left;
}

.social { 
    float: right;
}

HTML

<!--Footer-->
<div id="footer">
    <h3 class="copyright">Copyright Stuff.</h3>
    <h3 class="social">Social Links.</h3>
    <div style="clear: both"></div>
</div>

It's crucial to remember to clear the floated blocks, ensuring the alignment of the footer div.

The reason why setting text-align does not produce the expected result is because <h3 /> is a block element that occupies the entire width, causing subsequent elements to move to the next "line". By applying float to a block element, it shrinks to its content size, allowing other elements to sit beside it smoothly.

Answer №2

To achieve the desired effect, simply update the text-align property to float for both classes: .copyright and .social.

UPDATE Check out this simplified jsFiddle demo by removing unnecessary elements: http://jsfiddle.net/kc6AL/6/

Answer №3

Follow these steps to style your elements:

.copyright {
 float:left;
 text-align: left;
}

.social {
 float:right;
 text-align: right;
}

Answer №4

To achieve this layout, I recommend using a single h3 element and then floating the social icons within that particular header tag.

Check out the updated demonstration here

<h3 class="copyright"><span class="social">Social Media Links.</span>All Rights Reserved.</h3>

Here is the CSS code:

.social { float: right; }

Answer №5

To make your h3 element display inline, simply add the following code: display: inline;. You can also refer to this link for a live example: http://jsfiddle.net/kc6AL/3/

If you want more information on this topic, check out this helpful resource:

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 media queries and JQuery to display a variety of menus based on screen

I have created a hamburger menu specifically for smaller screens, and it is functioning properly on small screens. However, I am facing an issue where if the menu is not open before resizing the screen to a larger size, the menu does not show at all. When ...

Learn how to toggle the visibility of three div elements arranged horizontally

$(document).ready(function () { $("#toggle").click(function () { if ($(this).data('name') == 'show') { $("#sidebar").animate({ width: '10%' }).hide() $("#map").an ...

What is the best way to conceal an element so that it only becomes visible when a user begins to input text

Hey there! I'm in the process of adding a search feature to my Jekyll site, and I've opted to use Simple-Jekyll-Search, which you can check out here: Link. Take a peek at what's inside my search.html: <input type="text" id="my-search-in ...

Adjust the height of a div according to the width using CSS in a progressive manner

I'm looking to create a fluid container that adjusts its height gradually based on the width of the window (as the div's width is set to 100%). Similar to the behavior achieved with the aspect-ratio CSS rule, I want the height to smoothly increas ...

What prevents Bootstrap 4 from breaking on mobile devices?

Here is the code I am working with: <div class="container-fluid"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div> When I view this code in t ...

Utilizing and incorporating distinct html elements on a separate webpage

I am in the process of developing a dynamic newspaper-style website where articles will be regularly updated and replaced on the Home Page. Each article featured on the Home Page will serve as a link to a separate page for full details. These article links ...

Controlling the position of a <div> element using JavaScript

Is there a way to adjust the position and size of a <div>? I have already set it to float with this CSS code: div.grid_tooltip { position: absolute; left: 0px; top: 0px; } ...

Creating a unique HTML design with Django Allauth

While there is no shortage of information on the topic, such as this thread and this one, I haven't been able to find a resource that explains it in a way that even a 5-year-old or a designer could grasp :) I only have knowledge of HTML and CSS, and ...

The reason the CSS direct descendant selector does not affect Angular components

We are working with a basic main.html. <app> <sidebar></sidebar> <main-content> <router-outlet></router-outlet> </main-content> </app> After loading a component through routing (changing the ...

Create custom buttons in Material-UI to replace default buttons in a React modal window

How can I prevent overlay on material-ui's RaisedButton? When I open a modal window, the buttons still remain visible. Which property should be added to the buttons to disable the overlay? Any assistance from those familiar with material-ui would b ...

Identify the Presence of Hover Functionality

For a while now, the trend has been leaning towards feature detection. I am interested in determining whether a visitor's browser supports the :hover pseudo class. With many mobile devices not supporting hovering, I want to adjust my event listeners a ...

Encountered an error while trying to download a PDF document in React

I'm currently working on adding a button to my website portfolio that allows users to download my CV when clicked. The functionality works perfectly fine on my localhost, but after deploying it to AWS Amplify, I encountered an error. The error occurs ...

ExtJS web displays appear differently when viewed on Chrome's toggle device mode versus a mobile browser

Greetings, I have been working on developing a web application that can be accessed through a mobile browser. Initially, I created the web application and tested it in mobile mode using Chrome's simulation feature. https://i.sstatic.net/aAvVW.jpg H ...

Minimizing lagging scroll movements while utilizing overflow-y: scroll;

I am currently working on a 2 column layout, where the right-hand column contains a scrollable list displaying a maximum of 200 items (implemented using a ul with overflow-y: scroll;). However, I have noticed that scrolling through the right-hand column i ...

Ensure consistent element heights within adjacent columns using CSS

My template looks like this: https://i.sstatic.net/hoLzR.jpg I am trying to keep the same height between each item in both columns, where the height is determined by the tallest item in each column when they are placed side by side. But on smaller screen ...

Creating an Angular form that adapts to changing input values

I'm encountering a problem with angular not recognizing the dynamic values from my inputs. My objective is to have angular populate hidden form fields with lat/lon when a user clicks on the map. The user then submits the form, but the data ends up mi ...

Alignment and stretching characteristics of three divs (one with a set height and two with uncertain heights)

Trying to find the right wording for this question was quite challenging due to the specific nature of the issue, so my apologies if it doesn't fully capture what I'm seeking. Just to clarify, I am specifically looking for a solution that is com ...

Eliminate the unnecessary blank page from the print preview by incorporating a setTimeout function to efficiently showcase the image

Having trouble with print preview in Chrome? Want to print with images inside without displaying them initially? You can use setTimeout to show the image after a delay. However, this method creates a blank page at the end. If you remove the setTimeout, th ...

JavaScript Cookie Array Handling

Is it possible to create a 2D array as a cookie in JavaScript? If so, how can I go about creating this array cookie and looping through it to retrieve data efficiently? Any guidance on this would be greatly appreciated. Thank you! ...

The differences between xPages and HTML templates are evident in the varying sizes of their elements

When using a html template in an xPages application, I noticed that all elements appear slightly larger compared to a plain html page. Even when checking the values in Chrome debugger, they all seem to be the same. https://i.sstatic.net/F7VdJ.png https:/ ...