Steps for designing a footer with a fixed width and transparent center gap that stays in place

Question

Steps for designing a footer with a fixed width and transparent center gap that stays in place

Looking to create a fixed footer with a transparent gap at the center that is 100% fixed width? No scripts needed!

EXPAND THIS WAY <<< ______ FIXED WIDTH GAP ______ >>> EXPAND THIS WAY

MY OWN SOLUTION

HTML

<div id="Ftr">
        <div id="FtrL"></div>
        <div id="FtrM"></div>
        <div id="FtrR"></div>
    </div>

CSS

#Ftr {
        position: fixed;
        height: 115px;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 21;
    }
    #FtrL,
    #FtrR {
        position: absolute;
        bottom: 0;
        height: 100%;
        width: calc(50% - 360px);
        width: -webkit-calc(50% - 360px);
    }
    #FtrL {
        background: url('../Images/Layout/footer_left.png') repeat-x;
        left: 0;
    }
    #FtrR {
        background: url('../Images/Layout/footer_left.png') repeat-x;
        right: 0;
    }
    #FtrM {
        background: url('../Images/Layout/footer_middle.png') no-repeat;
        height: 115px;
        width: 720px;
        margin: 0 auto;
    }

Check out the live example here:

html css sticky-footer

Answer 1

Answer №1

Utilizing CSS along with the advanced CSS3 calc function can be beneficial:

To set the width of side DIV elements, you can use the following CSS property:

width: calc((100% - 200px) / 2); /* supported by most browsers */
width: -webkit-calc((100% - 200px) / 2); /* works on webkit browsers like Chrome and Safari */
width: -moz-calc((100% - 200px) / 2); /* Firefox compatibility */

In this case, the fixed width of the center DIV is 200px. By using this approach, both side DIV elements will evenly fill up the remaining horizontal space. Keep in mind that this method may not work consistently across all browsers. In such cases, using JavaScript might be necessary (refer to my other answer).

DEMO

Kudos to the question author for pointing out the importance of webkit-calc.

Answer 2

Utilizing CSS along with the advanced CSS3 calc function can be beneficial:

To set the width of side DIV elements, you can use the following CSS property:

width: calc((100% - 200px) / 2); /* supported by most browsers */
width: -webkit-calc((100% - 200px) / 2); /* works on webkit browsers like Chrome and Safari */
width: -moz-calc((100% - 200px) / 2); /* Firefox compatibility */

In this case, the fixed width of the center DIV is 200px. By using this approach, both side DIV elements will evenly fill up the remaining horizontal space. Keep in mind that this method may not work consistently across all browsers. In such cases, using JavaScript might be necessary (refer to my other answer).

DEMO

Kudos to the question author for pointing out the importance of webkit-calc.

Answer 3

Answer №2

<div id="footer">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>


#footer {
  position: fixed; left: 0; bottom: 0; overflow: hidden; width: 100%;
}

#footer .left {
  float: left: width: 200px; height: 115px;
  background: url('../Images/Layout/footer_left.png') repeat-x;
}

#footer .right {
  float: right: width: 200px; height: 115px;
  background: url('../Images/Layout/footer_right.png') repeat-x;
}

#footer .center {
  overflow: hidden; height: 115px;
  background: url('../Images/Layout/footer_middle.png') no-repeat;
}

Answer 4

<div id="footer">
  <div class="left"></div>
  <div class="right"></div>
  <div class="center"></div>
</div>


#footer {
  position: fixed; left: 0; bottom: 0; overflow: hidden; width: 100%;
}

#footer .left {
  float: left: width: 200px; height: 115px;
  background: url('../Images/Layout/footer_left.png') repeat-x;
}

#footer .right {
  float: right: width: 200px; height: 115px;
  background: url('../Images/Layout/footer_right.png') repeat-x;
}

#footer .center {
  overflow: hidden; height: 115px;
  background: url('../Images/Layout/footer_middle.png') no-repeat;
}

Answer 5

Answer №3

It seems like achieving your desired layout across different browsers using CSS alone may be a challenge. However, if you're open to a bit of JavaScript (don't worry, no need to beat me up for suggesting it!), I can show you how easily you can accomplish it with just a few lines of code. Check out the demo here.

HTML

<div id="FtrM">
    <div id="FtrL"></div>
    <div id="FtrC"></div>
    <div id="FtrR"></div>
</div>

CSS

#FtrM {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
}
#FtrL, #FtrR, #FtrC {
    float: left;
    height: 100%;
}
#FtrL, #FtrR {
    width: 100px;
    background-color: black;
}

#FtrC {
    background: none;
    width: 200px;
}

JS

function calc() {
    $('#FtrL, #FtrR').width(($('#FtrM').width() - $('#FtrC').width()) / 2);
}
calc();
$(window).resize(calc);

Answer 6

It seems like achieving your desired layout across different browsers using CSS alone may be a challenge. However, if you're open to a bit of JavaScript (don't worry, no need to beat me up for suggesting it!), I can show you how easily you can accomplish it with just a few lines of code. Check out the demo here.

HTML

<div id="FtrM">
    <div id="FtrL"></div>
    <div id="FtrC"></div>
    <div id="FtrR"></div>
</div>

CSS

#FtrM {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
}
#FtrL, #FtrR, #FtrC {
    float: left;
    height: 100%;
}
#FtrL, #FtrR {
    width: 100px;
    background-color: black;
}

#FtrC {
    background: none;
    width: 200px;
}

JS

function calc() {
    $('#FtrL, #FtrR').width(($('#FtrM').width() - $('#FtrC').width()) / 2);
}
calc();
$(window).resize(calc);

Answer 7

Answer №4

Learn HTML with this example:

<div class="container">
<div class="footer">YOUR CONTENT HERE</div>
</div>

Style it with CSS:

.container {width:100%;}
.footer {margin:0 auto;width:300px;height:50px;}

This code should meet your requirements. Feel free to test it out here: http://jsfiddle.net/2Qw6D/1/

Answer 8

Learn HTML with this example:

<div class="container">
<div class="footer">YOUR CONTENT HERE</div>
</div>

Style it with CSS:

.container {width:100%;}
.footer {margin:0 auto;width:300px;height:50px;}

This code should meet your requirements. Feel free to test it out here: http://jsfiddle.net/2Qw6D/1/

Steps for designing a footer with a fixed width and transparent center gap that stays in place

Answer №1

Answer №2

Answer №3

HTML

CSS

JS

Answer №4

Similar questions

Unique Selector Customization

What's the reason for the mousewheel functioning in Chrome but not in Firefox?

How can I apply various textures in three.js?

Is it possible for a user to chat on Whatsapp by entering their mobile number in an HTML form within the app?

Unable to halt animation at the final frame

The slides on SlickJS are initially loaded in a vertical alignment, but once the arrows are interacted with,

Is it possible to utilize viewport height as a trigger for classes in Gatsby?

Issues with the FacebookConnect plugin on PhoneGap Build

store the id of each li element dynamically into an array

Utilizing Print Styles in an Angular 7 Application: A Step-by-Step Guide

Resolving the issue of the 'Failed to load resource: net::ERR_FILE_NOT_FOUND' error

Deactivate input areas while choosing an option from a dropdown menu in HTML

How can I ensure my md-sidenav takes up the entire height when using ui-router?

Why isn't Freichat displaying the name of the user who logged in?

Problems with CSS text scrolling

Troubleshooting Problem with React Slider: Inability to Display Images and Previous Button

Attributes required are not functional on mobile devices

How to transfer a PHP echo value to a popup modal box

Is there a way to verify if text was generated using CSS?

Establishing a connection between Python and MySQL on a Windows operating system using