Create a footer with a centered column orientation

I am currently working on creating a footer with four columns, one of which will display an image while the others will contain useful hyperlinks.

This is what I have accomplished so far: http://jsfiddle.net/Lqh5a/

HTML

<div id="wrapper">
<div id="footer">
<div class="footerFloat">
<h4>Header 1</h4>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li></div>
<div class="footerFloat">
<h4>Header 2</h4>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 3</h4>
<ul>
  <li><img src="http://cdn.shopify.com/s/files/1/0593/8633/t/2/assets/footer-logo.png?1101"></li>
</ul>
</div>
<div class="footerFloat">
<h4>Header 4</h4>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li></div>
</div>
</div>

CSS

 #footer {
        width: 100%;
        margin: auto;
        padding-bottom:200px;
    }
    .footerFloat {
    width: 100%;
    }
@media all and (min-width: 950px) {
    #footer {
        width: 980px;
        margin: auto;
    } 
    .footerFloat {
    width: 25%;
    float: left;
    }
}

#wrapper {
    background-color: blue;
    width: 100%;
    overflow:hidden;
}

This is new to me, so I'm unsure if I'm going about it in the correct way. Any tips on how to ensure my footer looks how I envision it?

htmlcssimagefooter

Answer №1

While it may not be flawless, this solution can certainly steer you in the right direction towards your goal. I've made some CSS additions to your fiddle for better presentation.

.footerFloat {
    width: 25%;
    float: left;    
 }

.footerFloat ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

Check out the updated FIDDLE here!

Answer №2

It seems like you were missing some ul tags in your code, but the corrected version should be closer to what you want.

Here is the updated code on JSFiddle

Below is the corrected HTML:

<div id="wrapper">
<div id="footer">
    <div class="footerFloat">
        <h4>COMPANY</h4>
            <ul>
                <li>CONTACT</li>
                <li>CUSTOMER CARE</li>
                <li>ABOUT US</li>
            </ul>
    </div>
    <div class="footerFloat">
        <h4>ORDERING</h4>
        <ul>
            <li>SHIPPING</li>
            <li>RETURNS</li>
            <li>SIZE CHART</li>
        </ul>
    </div>
    <div class="footerFloat logo">
        <img src="http://cdn.shopify.com/s/files/1/0593/8633/t/2/assets/footer-logo.png?1101">
    </div>
    <div class="footerFloat">
        <h4>STORE</h4>
            <ul>
                <li>SHOP</li>
                <li>RETAILERS</li>
                <li>GIFT CARDS</li>
            </ul>
    </div>
    <div class="footerFloat">
        <h4>SOCIAL</h4>
            <ul>
                <li>BLOG</li>
                <li>INSTAGRAM</li>
                <li>PINTEREST</li>
            </ul>
    </div>
</div>
</div>

And here is the accompanying CSS:

 ul {
    list-style: none;
    list-style-position: inside;
    padding: 0;
}
ul li {
    text-align: center;
}

#footer {
    width: 100%;
    margin: auto;
    padding-bottom:200px;
}
.footerFloat {
    width: 19%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 0.750em;
}
@media all and (min-width: 950px) {
    #footer {
        width: 980px;
        margin: auto;
    } 
    .footerFloat {
        width: 25%;
        float: left;
    }
}

.logo {
    padding-top: 4em;
}

#wrapper {
    background-color: #fff;
    width: 100%;
    overflow:hidden;
}

Note: The Fiddle link provided may not be working correctly.

Answer №3

If encountering issues with floating divs, consider exploring an alternative approach. Try applying pos:absolute; bottom:0px to the container div and then adding pos:relative; top:0 left 0. However, be cautious if everything has been floated above the footer as it may cause complications.

Answer №4

Check out these suggestions. They should help resolve the issue...

   <div id="wrapper">
      <div id="footer">
        <div class="footerFloat">
        <h4>Header 1</h4>
          <ul>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>Line 3</li>
            <li>Line 4</li>
          </ul>
        </div>
        <div class="footerFloat">
          <h4>Header 2</h4>
          <ul>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>Line 3</li>
            <li>Line 4</li>
          </ul>
        </div>
        <div class="footerFloat">
          <h4>Header 3</h4>
          <ul>
            <li><img src="http://cdn.shopify.com/s/files/1/0593/8633/t/2/assets/footer-logo.png?1101"></li>
          </ul>
        </div>
        <div class="footerFloat">
          <h4>Header 4</h4>
           <ul>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>Line 3</li>
            <li>Line 4</li>
          </ul>
        </div>
        <div class="footerFloat">
          <h4>Header 4</h4>
           <ul>
            <li>Line 1</li>
            <li>Line 2</li>
            <li>Line 3</li>
            <li>Line 4</li>
          </ul>
        </div>
      </div>
    </div>

Combine it with this css:

#footer {
        width: 100%;
        margin: auto;
        padding-bottom:200px;
    }
ul{
    list-style: none;
    display: inline-block;
    padding: 0;
}
@media all and (min-width: 950px) {
    #footer {
        width: 950px;
        margin: auto;
    } 
    .footerFloat {
    width: 25%;
    float: left;
        text-align: center;
    }
}

#wrapper {
    background-color: blue;
    width: 100%;
    overflow:hidden;
}

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 advantages and disadvantages come with choosing between using vh and vw for responsive text?

My main inquiry is centered around the various techniques for creating responsive text. Is there a particular method that stands out as the best option for general use, or do different methods serve distinct purposes? ...

htmlcsstextflexbox

Issue with Semantic-UI Special PopUp not displaying on screen

I'm currently working on creating a unique pop-up feature using custom HTML, with the intention of adding content to it later on. My console is displaying the following message: Popup: No visible position could be found for the popup. $(document) ...

javascriptjqueryhtmlsemantic-ui

Eliminate redundant tags using jQuery

I have a code snippet that I need help with. I want to check for duplicates and if found, display an alert stating that it already exists so users can't insert the same word/tag again. Can someone please assist me? <div id="tags"> <span>a ...

javascriptjqueryhtml

Selenium - pausing for scroll completion

I am currently working on automating downloads from a webpage using the selenium tool. My approach involves creating a firefox driver that opens the page and clicks the download button. However, I have encountered an issue where the button needs to be vis ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Comparing React's Styled-components, JSS, and Emotion: Which is

As a CTO, I am faced with the decision of choosing between three popular CSS-in-JS libraries: jss emotion styled-component. I will keep this question focused and avoid straying into subjective territory. If necessary, I will answer it myself by asking sp ...

cssreactjsstyled-componentsjssemotion

How the logo's placement shifts while zooming out (using CSS and Angular 4+)

I am facing an issue with my navbar that includes a logo (MostafaOmar) which shifts position when zoomed out. If you try zooming to 70%, you will notice the logo's position changes as well. Is there a way to make it stay in place at 100% zoom? Here ...

javascripthtmlcssangularfrontend

What is the best way to expand and collapse a mat-expansion-panel using a button click

Is it possible to expand a specific mat-expansion-panel by clicking an external button? I've attempted linking to the ID of the panel, but haven't had any luck... <mat-expansion-panel id="panel1"> ... </> ... <button (click)="doc ...

htmlangularangular-material

Issue with Electron Remote process failing to take user-defined width and height inputs

I'm currently facing an issue with utilizing remote windows in electron. I am attempting to process user input and use that input to generate a new window with specific width and height. However, when I hit submit, nothing happens. I can't figur ...

javascripthtmlnode.jselectron

What is the best way to display DT elements next to each other?

Here is a link to the code snippet: http://jsfiddle.net/ZcdkT/1/ The code renders as: DT-nameA DD-definitionA 1 DT-nameB DD-definitionB 1 DD-definitionB 2 I would like it to be formatted like this: DT-nameA DT-nameB DD-definitionA 1 ...

css

Creating a user-friendly HTML form to convert multiple objects into JSON format

Edited content: $.fn.serializeObject = function() { var obj = {}; var arr = this.serializeArray(); $.each(arr, function() { var value = this.value || ''; if (/^\d+$/.test(value)) value = +value; if (obj[this.name] !== u ...

javascriptjqueryhtmljsonforms

Using the flex:1 property does not automatically make my elements the same size and cover the entire height of the container

I have 2 containers and I want the elements in each container to fill the entire container. My goal is to make one container appear larger than the other. https://i.stack.imgur.com/73yoR.jpg Even though I am using the flex: 1 property, it does not seem t ...

css

Unlocking the power of dynamic text using a single form

My comment reply system is experiencing an issue where the first reply works fine, but subsequent replies are unable to get the reply text value. How can I ensure that all replies work properly based on the Razor code provided below? <h4>Comments< ...

javascriptjqueryhtmlajaxasp.net-mvc

Two tables are positioned using distinct alignments but share a common stylesheet

I have created two tables, one using HTML (with a touch of PHP) and the other with two PHP loops. Starting with the stylesheet: .statistics { font-family: Arial, monospace; font-size: 36px; margin-left: 5%; width: 90%; } .statistics tr { ...

phphtmlcssformshtml-table

Guide on adding a parent class to style all generated CSS rules in styled-components 5.3.5

When my application loads into a parent div with a specific class (for example, .my-app), is there a way to add the prefix .my-app to all classes generated by styled-components? For instance, consider a component like this: import React from 'react& ...

cssreactjsbabeljsstyled-components

Troubleshooting issues with document.querySelectorAll in JavaScript

Can someone explain why document.querySelectorAll isn't functioning properly in this code snippet? I'm a beginner and could use some help. <p id="demo">This is a paragraph.</p> <h1 id="1demo"> Hello </h1&g ...

javascripthtml

What could be causing my fixed header to disappear in Safari 5?

I am experiencing a strange issue with my fixed header on Safari 5 for iPad. The header disappears once it scrolls down to a certain point, even though it works fine in IE, Firefox, Chrome, and the latest version of Safari. Has anyone else encountered this ...

htmlcsssafaripositionmobile-safari

Ways to manipulate the placement of angular material 2 sidenav content to the bottom

I have been experimenting with various methods in CSS to override the existing side nav component in Angular Material 2. mat-sidenav-container { background: white; bottom: 0px !important; /* <---- no success */ } mat-sidenav { width: 300px; ...

cssangularangular-material2

When an HTML element extends beyond the screen's right boundary, it becomes truncated

My website utilizes a table to showcase some data, but there's an issue when viewed on smaller screens. The table gets cut off and not all the content is visible. Even after scrolling completely to the right, the rightmost field remains barely visible ...

htmlcssreactjsmaterial-designmaterial-ui

Having trouble getting the product PHP script to upload properly

I have been struggling with a Php script that I created to upload products to my website for over 5 days. Unfortunately, it's not functioning properly and no errors are being displayed. Despite my best efforts, I am unable to identify the error in the ...

phpjqueryhtmlcss

Issue with FusionCharts rendering correctly arises when the <base> tag is present in the HTML head section

Combining AngularJS and FusionCharts in my web application has led to a unique issue. The upcoming release of AngularJS v1.3.0 will require the presence of a <base> tag in the HTML head to resolve all relative links, regardless of the app's loca ...

javascripthtmlangularjsfusioncharts