Bottom line Ambiguity

View my simple footer design on JSFiddle

Seeking assistance with aligning the copyright text and social media icons in my footer.

Is there a method to keep the "Copyright © 2015. All Rights Reserved | Privacy Policy" text aligned on the left, while ensuring the "Facebook, Twitter, Linkedin, and Youtube" icons remain on the right side of the same line?

I attempted using multiple break tags for separation but encountered layout issues when zooming in.

Efforts to use span or float elements resulted in the items moving onto separate lines.

The desired layout can be viewed here.

Appreciate any guidance provided.

The HTML code snippet:

    <?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<!-- The rest of the HTML code omitted for brevity -->

The CSS code snippet:

/*------------------Body------------------*/
body{
    margin: 0px;
    padding: 0px;
    font-family: arial, sans-serif;
}
/* Other CSS rules omitted for brevity */
htmlcss

Answer №1

Does this align with your understanding? - https://example.com/hedgehog34/1pekqp0g/4/

CSS: 

/*------------------Body------------------*/
body{
    margin: 0px;
    padding: 0px;
    font-family: arial, sans-serif;
}

/*------------------Upper Footer------------------*/
#upper-footer{
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #FF0000;
}

/*------------------Footer------------------*/
#footer-inner{
    overflow:hidden;
    padding:5px 0;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    margin: 0px auto;
    clear: both;
}

#footer-inner a:visited{
    text-decoration: none;
    color:#ffffff;
}

#footer-inner a:link{
    color:#ffffff;
}

#footer-inner a:hover{
    color: #FF0000;
}

#footer-inner a:active{
   color: #FFFF00;
}

/*------------------Footer Outer------------------*/
#footer-outer { 
     background: #000000;
}
span:first-child {
    margin-top:12px;
}

I am unable to address your final two inquiries without further clarification. Question number 2 may not be suitable for discussion on Stack Overflow as it is focused solely on technical issues, whereas the term "better" can be quite subjective.

Answer №2

It's a bit unclear what the intended look is, but using spans may not be the best choice here, especially with floats applied.

When adding floats, it converts elements into block level so using a div might be better in this case.

Some prefer not to have bare text nodes, so wrapping copyright text in a paragraph is a good practice (opinions vary).

Instead of using non-breaking spaces for spacing, consider using margins and padding as they are designed for that purpose.

/*------------------Body------------------*/
 body {
    margin: 0px;
    padding: 0px;
    font-family: arial, sans-serif;
}
/*------------------Upper Footer------------------*/
 #upper-footer {
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #FF0000;
}
/*------------------Footer------------------*/
 #footer-inner {
    overflow:hidden;
    padding:5px 0;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    margin: 0px auto;
    clear: both;
}
#footer-inner a:visited {
    text-decoration: none;
    color:#ffffff;
}
#footer-inner a:link {
    color:#ffffff;
}
#footer-inner a:hover {
    color: #FF0000;
}
#footer-inner a:active {
    color: #FFFF00;
}
/*------------------Footer Outer------------------*/
 #footer-outer {
    background: #000000;
}
.legal, .social {
    line-height: 30px;
 }

.legal {
    float: left;
}
.legal p {
    margin: 0;
    padding-left: .5em;
}

.social a {
    display: inline-block;
    vertical-align: middle;
}

.social {
    float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
    <div id="upper-footer"></div>
    <div id="footer-outer">
        <div id="footer-inner">
            <div class="legal">
                <p>Copyright &copy; 2015. All Rights Reserved | <a href="" title="">Privacy Policy</a>
                </p>
            </div>
                <div class="social"> <a href="" title=""><i class="fa fa-facebook fa-2x"></i></a>
 <a href="" title=""><i class="fa fa-twitter fa-2x"></i></a>
 <a href="" title=""><i class="fa fa-linkedin fa-2x"></i></a
     <a href="" title=""><i class="fa fa-youtube fa-2x"></i></a>

                </div>
            </div>
        </div>
</body>

Besides that, the remaining questions you have may not be suitable for SO

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

Expanding a list of object arrays through iteration: A step-by-step guide

// Initializing with one object let posi_val=[{top: '3px', left: '2px'}]; // Adding another object in the loop for (let i = 1; i < n; i++) { posi_val.push({ top: `${posi_val[i - 1].top.slice(0, -2) * 2}px`, l ...

javascripthtmlcssarrays

The Tailwind Typography plugin simply maintains the default font size of heading tags without altering their style

I've been working on parsing an MDX file and converting it into React components. My tech stack includes TailwindCSS, Next.js, and React. Following the Tailwind documentation, I have installed the tailwind/typography plugin. In my tailwind.config.js ...

htmlcssreactjsnext.jstailwind-css

What is the correct way to nest multiple ng-if statements?

I'm currently grappling with a problem involving multiple nested ngIf directives applied to ng-template elements in Angular.js, and I've yet to find the ideal solution. While I am aware of workarounds, they are not as efficient as I would like th ...

htmlangular

Using PHP and JQuery to disable a button after the letter "U" is typed

I am looking for a way to disable the button when the term "U" (defined as Unable) appears. How can I achieve this? Below is the button in question: <input type="submit" class="form-control btn-warning" name="search" value="Search Data"></input& ...

javascriptphpjqueryhtmlforms

Idea: Develop a bookmarklet that generates a header form and deletes it upon submission

After much contemplation and experimentation, I have been grappling with the idea of creating a bookmarklet that displays a header when clicked on any webpage. This header will contain a small form that submits its contents to a server before disappearing. ...

javascriptjqueryhtmliframebookmarklet

A method to retrieve the content of an input field and assign it to an onclick event

I encountered an issue with an ajax function that requires the lat and lng variables. Here is a simple HTML code snippet: <fieldset> <legend>Geocoding Services</legend> Latitude:<br><input type="text" id="lat" value="42.3600077 ...

javascripthtmlajax

JavaScript triggered Bootstrap dropdown toggle has inconsistent behavior in remaining open

JSFiddle I am thrilled to report that the fiddle is functioning exactly as intended with the exact same code from my website! Simply copied and pasted. Visit my site If you want to reproduce this problem, follow these specific steps. Open a fresh load of ...

javascriptjqueryhtmltwitter-bootstrap

How are these background images able to remain in a fixed position like this?

Trying to name this question correctly was a bit tricky. Hopefully I got it right. I have a new client and they want their website to have a similar feel to . If you check out the index page and scroll down, there's this cool 'smooth animation& ...

htmlcssbackground-imagebackground-attachment

How can I realign a CSS dropdown menu?

Apologies, I was really tired of trying to figure out the issue. Let me rephrase the question - "How do I make a drop-down menu appear below a specific item in my centered horizontal menu". (I have made some changes to the code) HTML <div class="menu" ...

htmlcssnavbar

When attempting to submit, the jQuery validations fail to function accordingly

I have created an HTML form along with jQuery for validation purposes. However, upon clicking the submit button, nothing seems to be happening. I am unsure if my form is properly connecting with the jQuery file or not. Can someone please review my code and ...

phpjqueryhtmlvalidation

Achieving full coverage of cell content within a cell area by utilizing align-items in CSS Grid

Is it possible to achieve two conflicting goals using CSS Grid? In my design, I want the content in each cell to be vertically centered using align-items: center; At the same time, I need the entire area of the cell to be filled with color. However, ...

htmlcsscss-grid

"Combining the powers of Ajax, jQuery, and PHP

I have developed a jQuery form that looks like this <div data-role="page" id="page3" data-theme="d" > <div data-role="header"> <h1 style="font-family: 'Open Sans Condensed', sans-serif;font- size:23px">LetsAllSave</h1> ...

phpjqueryajaxhtmljquery-mobile

Tap-to-Call Dialing on Smartphones

Is there a way to set up a web page (php or html) so that when a user accesses it from an Android phone, a phone number is automatically dialed? I've been trying to make this work but haven't had any success. Here's what I have attempted so ...

phpandroidhtmlmobile

What could be causing my function to fail <object>?

Within index.php, I am calling the function twice, which includes chart.html. index.php chart_line($valuesNight); //first call chart_line($valuesEvening); //second call ?> <?php function chart_line($jsonDataSource){ ?> < ...

javascriptphphtml

Experiencing a specific error when utilizing the <v-file-input> component

I've integrated VueJS with vuetify. When I switch from an input tag to a v-file-input component, I encounter an error when triggering the function @click. Below is the script and template code: <script> import papa from "papaparse"; export ...

javascripthtmlvue.jsvuetify.js

What is the best way to conceal a table row if the date in the table cell is earlier than the current date?

Being a coding version of Dr. Frankenstein, I have successfully put together a table with datatables and UK Date Sorting, as shown [here][1]. However, the final hurdle is figuring out how to hide rows where the date is older than today's date. In othe ...

javascriptjqueryhtml

I have a dynamic blog site that is generated on the fly using Ajax, making the content unsearchable

I have a blog website that is created dynamically using Ajax (XMLHttpRequest) and the HTML History API. One issue I am facing is that my content is not searchable by search engines like Googlebot. I know that Google is now able to analyze such sites, but w ...

javascriptjsonajaxhtmlbrowser-history

Iterating over an array and displaying elements on the webpage

Struggling to access an array and loop through it, but only able to print out one element instead of all. Need a hint on how to solve this issue. See my code below: let toppingsCount; const burger = document.createElement('div'); const toppingsD ...

javascripthtmlcssdomcss-selectors

Using a directive to insert HTML content from a separate file into a div element

As a newcomer to angularjs, I am experimenting with appending html from another file using my directive. The goal is to only do this if there is a successful response from the server after an http request. The current approach involves defining my directi ...

angularjshtmlangularjs-directive

Extracting information from JSON and presenting it in a structured table format

I've hit a wall with this JavaScript issue on my website. I'm trying to convert API JSON data into a table, and it's working fine when the data is on separate lines. However, when I introduce nested arrays in the JSON data, everything ends u ...

javascripthtmlarraysjsonknockout.js