Is it possible to create a Footer with a 100% width in CSS?

I have a simple HTML page with all elements contained within a mainWrapper div and secondWrapper div.

Everything is currently sized to 960px, including the pageHeader, pageContent, and pageFooter.

However, I need to keep everything at 960px except for the pageFooter.

Below is the CSS code I have attempted:

<style type="text/css">
<!--
body {
}

#secondWrapper {
        margin-left:auto;
    margin-right:auto;
    width:960px;
    min-width:910px;

}
#mainWrapper{
    margin-left:auto;
    margin-right:auto;
    width:960px;

}

#pageHeader {
    height:80px;
    width:100%;
    min-width: 918px;
    border-bottom: solid 1px #ededed;
    z-index:1000;
    position:relative;


}
#pageContent {
    clear:both;
    width:100%;
    min-width: 918px;
    background-image:url(img/map.png); 
    height:600px; 
    background-repeat:no-repeat;
    background-position:center;
    box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
    z-index:1;

}
#pageFooter {
    background-color:#CCC;
    width:100%;
    min-width: 918px;
}

#logo{
    position: absolute;
    margin-left:29px;
    background-color:#cb202d;
    width:120px;
    height:110px;
    top: 0;
    text-align:center;
    vertical-align:center;
    display:block;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:24px;
    color:#FFF;
    font-weight:bold;
    float:left;
    z-index:1000;
        -webkit-box-shadow: 0 5px 6px -6px grey;
       -moz-box-shadow: 0 5px 6px -6px grey;
            box-shadow: 0 5px 6px -6px grey;
}

#logoTxt{
    position: relative;
    top:26%;

}

#yourCurrentTime{
    float:left;
    left:220px;
    top:10%;
    position:relative;
    border: 10px solid #1abc9c;
    border-radius:4px;



}

#arrow-down {
    position:absolute;
    width: -23px;
    height: 2px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #1abc9c;
    left: 99px;
    top: 30px;
}

#b {
    position:absolute;
    width:200px;
    height:115px;
    z-index:10000000;
    left: -59px;
    top: 48px;
    background-color:#333;
    display:none;



}

    div#a:hover div#b {
        display: inline;

    }
        div#a:hover {
            background-color:#eceded;
            cursor:pointer;


    }

            div#divBtn:hover {
            background-color:#4a4a52;
            cursor:pointer;


    }


    div#a{
    width:140px;
    height:47px;
    position:absolute;
    left: 825px;
    top: 0px;
    }


-->
</style>

I have tried different solutions from Google and StackOverflow, like:

html,
body {
 margin:0;
 padding:0;
 height:100%;
}

Unfortunately, none of these solutions have worked for me.

Any assistance would be greatly appreciated.

Here is the Jsfiddle for reference: http://jsfiddle.net/crf121359/jwgfH/

htmlcss

Answer №1

If you want to achieve this effect, follow the steps below:

Using HTML:

<div class="container">
   <div class="inner_container> 
       <!-- Place your page content here -->
   </div>
</div>
<footer>
</footer>

Applying CSS:

.container {
  position: relative;
  min-height: 100%;
  padding-bottom: 200px; /* Adjust to footer height */
}

.inner_container {
  width: 960px;
  margin: 0 auto;
}

footer {
  width: 100%;
  height: 200px;
  position: absolute;
  left: 0;
  bottom: 0;
}

Answer №3

setting the width to 100% will only take effect if the direct parent element has a specified width.

Consider defining a max-width for the body element to test if that resolves the issue.

Answer №4

Could you also provide the HTML code you are using? If the parent div or container has a width of 100%, it should display the desired outcome.

Answer №5

To create a webpage that is exactly 960px wide, simply specify the width in the <body> tag using width:960px; in the CSS.

For other elements that you want to display as 960px, use width:100%;. You can divide the rest by using width:50%;, width:25%;, which represent 50% and 25% of 960px respectively.

Remember, height:100% is not necessary as the elements will automatically adjust the height of the webpage if placed correctly.

In summary, follow these steps:

body {
    width:960px;
    margin:0 auto;
}

#secondWrapper {
    width:100%;
    float:left;
}

Implement the above code for accurate positioning of elements on your webpage.

UPDATE:

If you want a 960px gap between #pageContent and #pageFooter, simply add a margin-top property like this:

#pageFooter {
    margin-top:960px;
}

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

Unique rephrased text: "Varied wrapping styles in both

Feeling frustrated with a seemingly commonplace issue. Despite the thousands of times it has been asked before, I can't seem to find an answer on Google. I wanted to neatly display my text within one of my cards, but so far I've only achieved th ...

javascriptcssreactjstextmaterial-ui

Ways to incorporate a reverse transition effect

I am encountering an issue with a sliding effect on a div. When it has a class hddn, the overlay will have right: -100% from the viewport. However, when the hddn class is removed, it should return to the viewport with right: 0. How can I animate this movem ...

htmlcss

Triggering the 'Next' function with a key press event

Currently, I am utilizing the following code to manage the keydown event for the tab and enter keys within an input field. $(document).on('keydown', ".className" , function(e) { var keyCode = e.keyCode || e.which; alert(keyCode) / ...

htmljqueryeventsandroid-softkeyboardkeydown

A guide on dynamically altering text upon hovering over an element using Vue.js

On my website, I have the following HTML code: <div class="greetings"> <img @mouseover="hover='A'" @mouseleave="hover=''" src="a.png" alt="A" /> <img @mouseover="hover='B'" @mouseleave="hover=''" ...

javascripthtmlvue.js

Leveraging ACE in conjunction with WT

UPDATE 3 Here is the finalized working code below. Remember to use ace.js from the src folder, as it will not work from the libs directory. You need the pre-packaged version from their site. WText *editor = new WText(root()); editor->setText("function( ...

javac++htmlajaxwt

Upon rerender, React fails to refresh the style changes

I am encountering an issue with my React component where the visibility and position can be changed by the user. Currently, the visibility can be toggled by adding or removing a CSS class, while the position is adjusted through a function that updates the ...

javascriptcssreactjsdrag-and-drop

Is it possible to use bootstrap to hide specific components depending on the size of the media screen?

Struggling with styling responsiveness and hoping to find a Bootstrap class that can easily hide components on medium and small screens. I'm looking for a way to hide headings, paragraphs, buttons, and more without any extra hassle. ...

htmlcssbootstrap-5

Angular Dynamic Alert Service

Is it possible to customize the text in an Angular Alert service dynamically? I'm looking to make certain words bold, add new lines, and center specific parts of the text. Specifically, I want the word "success" to be bold and centered, while the rest ...

javascripthtmlcssangular

phperror message is included and echoed

I am facing an issue while trying to utilize the php include tag for my header and footer sections. Even though my index file and header.php file seem to be error-free, the included file is not showing up when I preview it in a browser. Is there an easy fi ...

phphtmlinclude

"Styling with CSS and HTML: The Art of Rotating

<!DOCTYPE html> <html> <head> <style> .screencontainer{ margin: 0 auto; display: block; xxheight: auto; xxmax-width: 90%; align-items: middle; } .foundations-wrapper{ display: inline-block; background-color: yellow; padding: 10px; ...

css

"Want to know the best way to retrieve the most recent form input value using jQuery or Javascript

I've been reading a lot about using jQuery to set and get field values, but I'm encountering an issue where I can't retrieve the value after submitting, editing it in an input field, and then submitting again. It works the first time, but no ...

javascriptjqueryhtmlformsmeteor

Strategies for creating a grid-inspired layout: tips and tricks

Recently, I've been tasked with creating a catalogue section for our e-commerce site. My designer came up with this layout which I find really appealing, but I'm having trouble figuring out how to implement it. I attempted using tables, but it di ...

htmlcssflexboxtailwind-css

How to send parameters to Bootstrap modal using a hyperlink

I need help confirming the deletion of a datatable row using a Bootstrap modal dialog. When a user clicks on the delete link, I want a modal to appear asking for confirmation. Here is my code: <c:forEach items="${equipes}" var="equ"> ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

"Composing perfect sentences: The art of incorporating quotes

I am attempting to include text with quotes in a DIV, like so: "All is well that ends well" The text is generated dynamically and I'm using a JavaScript font replacement plugin (CUFON) to add quotes around the text. Sometimes, the ending quote drops ...

javascriptjquerycssquotesword-wrap

Tips for animating input width as the size value changes during an ajax query transformation

This is my JavaScript code: function updatePriceDisplay() { $.ajax({ url:"query.php?currency=<?=$currencycode;?>" }).done(function(data) { $("value").attr("value", data).attr("size", data.length - 2); }); } updatePriceDi ...

javascripthtmlajax

Manipulate a 3D shape by transforming both the x and y axes using jQuery's mousemove

I am trying to create a 3D element that rotates on both the x and y axes based on the position of the mouse on the screen. While I have successfully achieved this effect using either the X or Y position, I am struggling to make it work simultaneously for b ...

jquerycssmousemove

List generated by BeautifulSoup contains duplicate entries - require a distinct linked list

I am currently attempting to compile a list of unique year links from a specific website (referenced below). Whenever I use the append function, it generates a lengthy list with repeated entries. My goal is to obtain a list that only consists of distinct ...

pythonhtmllistweb-scrapingbeautifulsoup

Manipulate HTML content from JSON data in JavaScript without using jQuery

The information stored in the texts.json file: [{ "PageTextKeyId": 1, "PageTextKeyName": "page-first-text", "PageTextValueName": "Lorem ipsum dolor sit amet" }, { "PageTextKeyId": 2, "PageTextKeyName": "after-page-first-text", "PageTextValueNa ...

javascripthtmljsonxmlhttprequest

What's the best way to align several buttons in the center of the screen horizontally?

I'm struggling to properly align divs with images inside another div. My goal is to insert buttons into my HTML and use jQuery to center them automatically, but I can't seem to get it right. You can view the fiddle I've created here: http:/ ...

javascriptjquerycsshtml

Meteor chat platform now offers the option to create multiple chat rooms

I've been working on an application that features multiple chat rooms. Currently, one of the rooms is functional in terms of sending and receiving messages. However, when I navigate to a different room and try to send a message, the message doesn&apos ...

javascripthtmlmeteorchat