Arrange items to float on the left, center, and right within a div using HTML

I'm encountering an issue with my HTML code. I have a footer on my website containing three separate sections. On the left side, there are small logos for Facebook, Twitter, and YouTube. In the center is the copyright text for my website, and on the right side are additional icons for Facebook, Twitter, and YouTube. The problem arises when I include the copyright text, causing the right-side icons to extend beyond the footer area. Here is a screenshot of the issue:

HTML 
<div id="footer">
        <div id="footerwrapper" style="margin-top: 78px">
            <a href="<?php echo $config['twitter']; ?>"><div class="footer-twitter" style="float:left"></div></a>
            <a href="<?php echo $config['youtube']; ?>"><div class="footer-youtube" style="float:left"></div></a>
            <a href="<?php echo $config['facebook']; ?>"><div class="footer-facebook" style="float:left"></div></a>
            <center><div style="padding-top: 24px;">Copyright goes here</div></center>
            <a href="<?php echo $config['twitter']; ?>"><div class="footer-twitter"></div></a>
            <a href="<?php echo $config['youtube']; ?>"><div class="footer-youtube"></div></a>
            <a href="<?php echo $config['facebook']; ?>"><div class="footer-facebook"></div></a>
        </div>
    </div>
CSS 
#footer {
    margin-top: 40px;
    background: #21282e;
    height: 60px;
    width: 100%;
    color: #b0b6be;
    font-size: 18px;
    position:relative;
}
#footerwrapper {
    margin: 0px auto;
    width: 70%;
}
.footer-twitter {
    width: 32px;
    height: 32px;
    background: url('../img/icons/twitter.png');
    float: right;
    display: inline-block;
    margin-top: 16px;
    margin-left: 16px;
    border-radius: 4px;
}
.footer-youtube {
    width: 32px;
    height: 32px;
    background: url('../img/icons/youtube.png');
    float: right;
    display: inline-block;
    margin-top: 16px;
    margin-left: 16px;
    border-radius: 4px;
}
.footer-facebook {
    width: 32px;
    height: 32px;
    background: url('../img/icons/facebook.png');
    float: right;
    display: inline-block;
    margin-top: 16px;
    margin-left: 16px;
    border-radius: 4px;
}

Can anyone offer a solution to this issue? Thank you!

javascriptjqueryhtmlcssfacebook

Answer №1

After reviewing your code, I noticed that there are excessive elements included that are not necessary. Therefore, I have simplified the HTML code for better readability.

<div id="footer">
    <p>
        <a class="icon footer-twitter" href="#">Twitter</a>
        <a class="icon footer-youtube" href="#">YouTube</a>
        <a class="icon footer-facebook" href="#">Facebook</a>
    </p>
    <p>Copyright information here</p>
    <p>
        <a class="icon footer-twitter" href="#">Twitter</a>
        <a class="icon footer-youtube" href="#">Youtube</a>
        <a class="icon footer-facebook" href="#">Facebook</a>
    </p>
</div>

Here is the CSS associated with the HTML:

#footer {
    box-sizing: border-box;
    margin-top: 40px;
    background: #21282e;
    overflow: auto;
    width: 100%;
    padding: 0 15%;
    color: #b0b6be;
    font-size: 18px;
    position:relative;
}
#footer p {
    width: 33.33%;
    float: left;
}
#footer p:nth-child(2) { text-align: center; }
#footer p:nth-child(3) { text-align: right; }


.icon {
    width: 32px;
    height: 32px;
    display: inline-block;
    border-radius: 4px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.footer-twitter {
    background: url('...');
}
.footer-youtube {
    background: url('...');
}
.footer-facebook {
    background: url('...');
}

The changes I made include:

  1. Eliminated the #footerwrapper and added padding to #footer. Utilizing box-sizing: border-box ensures proper sizing inclusive of padding.
  2. Divided the footer into three sections using p tags with each having a width of 33.33%. Alignment adjustments were made accordingly.
  3. Instead of utilizing an extra div for wrapping links, they are displayed as inline-blocks directly. Descriptive text was added between link tags while hiding the text itself.

For a demonstration, please visit: JSFiddle.

Answer №2

You have the option to create your own grid system

HTML

<div id="footer">
    <div id="footerwrapper" style="margin-top: 78px">
        <div class="footerside left">
            <a href="<?php echo $config['twitter']; ?>"><div class="footer-twitter left" ></div></a>

            <a href="<?php echo $config['youtube']; ?>"><div class="footer-youtube left" ></div></a>

            <a href="<?php echo $config['facebook']; ?>"><div class="footer-facebook left" ></div></a>
        </div>

        <div class="footermiddle left">
            <div style="text-align:center">Insert copyright here</div>
        </div>

        <div class="footerside right" style="width:30%;float:right;">
            <a href="<?php echo $config['twitter']; ?>"><div class="footer-twitter right"></div></a>
            
            <a href="<?php echo $config['youtube']; ?>"><div class="footer-youtube right"></div></a>
            
            <a href="<?php echo $config['facebook']; ?>"><div class="footer-facebook right"></div></a>
        </div>
    </div>
</div>

CSS

#footer {
    margin-top: 40px;
    background: #21282e;
    height: 60px;
    width: 100%;
    color: #b0b6be;
    font-size: 18px;
    position:relative;
}

#footerwrapper {
    margin: 0px auto;
    width: 70%;
}

.footer-twitter {
    width: 32px;
    height: 32px;
    background: url('../img/icons/twitter.png');
    display: inline-block;
    margin-top: 16px;
    margin-left: 16px;
    border-radius: 4px;
}

.footer-youtube {
    width: 32px;
    height: 32px;
    background: url('../img/icons/youtube.png');
    display: inline-block;
    margin-top: 16px;
    margin-left: 16px;
    border-radius: 4px;
}

.footer-facebook {
    width: 32px;
    height: 32px;
    background: url('../img/icons/facebook.png');
    display: inline-block;
    margin-top: 16px;
    margin-left: 16px;
    border-radius: 4px;
}

.footerside {
    width:30%;
}

.footermiddle {
    padding-top: 20px;
    width:40%;
}

.right {
    float:right;
}

.left {
    float:left;
}

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

When including external links, the domain is always placed at the beginning of the link, even if the link

Issue: Hyperlinks are displaying our domain name before the actual link. The text stored in our database is as follows: To learn more about Rich Habits <a href=”http://www.externaldomain.com”>click here.</a> When we echo this text in our ...

phphtmlurlhyperlinkhref

Is there a modal confirmation feature available in Salesforce?

if ((Modal.confirm && Modal.confirm('some unique text')) || (!Modal.confirm && window.confirm('same but different text'))) navigateToUrl('another link here','ANOTHER DETAIL','submit'); I am curious about t ...

javascriptjquerysalesforce

Exploring the varying behaviors of Javascript window.scrollTo across different browsers

I encountered a problem with the scrollTo function when the body has a dir=rtl attribute. Here's a jsfiddle showcasing my issue. HTML: window.scrollTo(-200, 0); <html> <head> </head> <body dir="rtl"> <div width="10 ...

javascriptinternet-explorergoogle-chromefirefox

Exploring the world of Chrome extensions with jQuery

Starting my first Chrome extension and feeling a bit stuck. I've gone through the information on https://developer.chrome.com/extensions/getstarted I understand how to modify the pop-up page, but I'm unsure how to allow JavaScript to alter a tab ...

javascriptjquerygoogle-chromegoogle-chrome-extension

Deactivate the button when the control validation is triggered within an ng-repeat directive in AngularJS

Code Snippet Link: View Code <form name="myForm"> <div ng-repeat ="ndc in NDCarray"> <div class="col-sm-4 type7" style="font-size:14px;"> <div style="margin-bottom:5px;">NDC9</div> <label>Number: ...

javascriptjqueryhtmlangularjs

Having trouble setting dynamic state using the render method in React ES6

I'm attempting to add dynamic states using a method. The concept is that when I invoke the method from a render method, it should accept a parameter value to set dynamic state values. Below is my code: renderFeaturePermissionOptions( featureName ) { ...

javascriptreactjsecmascript-6

How can you detect a click event on a hidden DIV without capturing clicks on any elements within the DIV, especially when the DIV is not present in the Document Object Model (DOM)

Currently, I am facing an issue with my vanilla JavaScript event listener. It seems to be passing data correctly, except when I click on text that is formatted as bold or italicized. Below is the JavaScript code that I am testing: window.onclick = functio ...

javascripthtmlmouseevent

I require assistance with the syntax for executing a SQL select statement

Here comes the confusion of the day! (I should use this as my handle) I'm utterly lost and confused. I need help figuring out how to create a select statement to match FriendID with UserID. FriendID is related to the UserID in my User table. For ex ...

c#asp.netmysqlsqlhtml

Using PHP to pass values from a MySQL database to JavaScript

hello, $i=0; while($row = $result->fetch_assoc()) { echo " <tr><td>".$row["Number"]."</td><td>".$row["MusikName"]." ".$row["MusikURL"]."</td></tr>"; This portion is successful...it displays -&g ...

javascriptphpmysql

Incorporating a new row in JQuery Datatable using an mdata array

I am currently using a datatable that retrieves its data through mData. var processURL="path" $.ajax( { type : "GET", url : processURL, cache : false, dataType : "json", success ...

javascriptjqueryhtmldatatable

What is the best way to update a prop value using a different function?

I have a single component in my NextJs application and I am trying to modify the child prop (referred to as type) of the child component when the <input> element is empty. However, I am facing issues with this task. Can someone please assist me? Tha ...

javascriptreactjsnext.js

Is there a way to adjust the background color of the clicked tab with divs and revert the others back to their original color?

<span class="row top-bar-left align-items-center" style="width: 80%; float:left"> <div tabindex="1" class="link tab" routerLink="details" routerLinkActive="active" [qu ...

htmlcssangular

Refresh Image with Node.js

Seeking guidance in the right direction! I have a NodeJS application that is currently displaying an image sourced from a local directory. This image, stored locally, undergoes updates periodically through an OpenCV script. However, I am facing an issue w ...

javascriptnode.jsexpress

Using Flask to extract data from HTML pages

Simple inquiry: I am using Flask and I need to extract the string value from this array. I am familiar with utilizing request.form["name"], but I am unsure of how to give this variable a name. How can I retrieve this variable in order to display it on my s ...

pythonhtmlflask

issue encountered while attaching css file / css styles not rendering

Here is the css link I am using: <link rel="stylesheet" type="text/html" href="/public/assets/lib/css/style.css" /> Despite trying various solutions such as removing "rel="stylesheet"", changing to "text/html", checking paths, placing it in the pu ...

cssnode.jsexpress

Issue: mongoose.model is not a valid function

I've been diving into several MEAN tutorials, and I've hit a snag that none of them seem to address. I keep encountering this error message: Uncaught TypeError: mongoose.model is not a function Even after removing node_modules and reinstalling ...

javascriptnode.jsmongoosewebpack

How to manage form submissions in Vue.js using inputs within child components

I'm working on a parent component that acts as a form. This form consists of multiple child components, each containing input fields. <template> <div class="form"> <generalData v-model="input" /> <textAreas v- ...

javascriptvue.jsvuejs2

Can styles be universally applied to specific elements or classes on a webpage by using hover on a single selector?

Is it possible, using only CSS and no JavaScript, to apply styles to specific elements or classes throughout an entire webpage without restrictions such as descendants or siblings, by hovering over a particular selector? For instance, I would like to remo ...

htmlcsscss-selectorshoverpseudo-class

Troubleshooting problems related to style injection using React.cloneElement and getBoundingClientRect()

I'm currently working on achieving a layout where the container component determines the style of the child components, specifically setting the width property of the children's style prop. TL;DR: How can I set the children's props based on ...

javascriptreactjs

Click the edit button to access the options in the material table

https://i.stack.imgur.com/Inyow.png Currently, I am utilizing Material Table within Reactjs to display the table Data. However, I have encountered a hurdle where I need to alter state upon clicking on the edit option/icon. My objective is not to modify th ...

javascriptreactjsmaterial-uimaterial-table