How to place a div with 100% width at the bottom of a float with a fixed width

Each day the same question seems to pop up, yet this particular issue has me stumped...

My goal is a simple one - I aim to design a fixed width layout with 3 columns, while ensuring that the header and footer stretch across 100% of the screen.

Everything appears to be in order except for the stubborn footer.

Check out an example here: http://jsfiddle.net/xMQLy/1/

The crux of the matter lies in the fact that without a set height for the main body and side columns, the footer refuses to sit at the bottom as intended.

Any suggestions on how to rectify this annoyance?

Many thanks.

csshtml

Answer №1

When using the absolute or fixed values for the CSS position property, it removes an element from its parent's context. This means that the size of the child element does not affect the width/height of the parent. The same effect is seen when using the float property: it becomes difficult to style elements effectively with position:absolute/fixed or float.

I have removed these properties and made revisions to your code. View the updated code on @Fiddle: http://jsfiddle.net/xMQLy/5/

Here are some changes I made:

  • Removed unnecessary CSS properties:
    .wrapper{position:relative;top:0}

    `.leftcol and .rightcol {floar:right/left}
  • Combined common styles for .leftcol, .main, .rightcol.
  • Updated HTML source by adding a 
    <div class="wrapper-align">
    wrapper around each div in the source, and eliminating whitespace between these wrappers [1]

[1]
To position the .leftcol, .main, .rightcol elements next to each other, you can apply display:inline-block to each div. By default, these elements align at the bottom, so vertical-align:top should be used to place them at the top. Since this property works only with inline elements, you need an inline wrapper around a display-block element to achieve this layout without affecting float or display:absolute/fixed.

Removing whitespaces helps prevent gaps between elements. To see this visually, compare these pages: No whitespace vs White space.

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

"Include the 'unsafe' prefix at the start of the URL in AngularJS

Whenever I attempt to access app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 within my app, the URL gets parsed as ==> unsafe:app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 Is ...

javascripthtmlangularjs

Display a concealed text box upon clicking BOTH radio buttons as well as a button

Below is the HTML code for two radio buttons and a button: <body> <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1"> <label for=&qu ...

javascripthtmljqueryradio-button

Tips for keeping div and input tags selected even after a user clicks

I am working on a quiz script and I am trying to customize it so that when a user clicks on the div or input tags, they remain selected with a different background color. Currently, I have achieved changing the background color of the div when clicked, ...

htmlcssformsinputlabel

Add a fresh column in the table that includes modified values from an existing column, affected by a multiplication factor provided through a text input

I'm currently working on a Laravel website where I have a pricing table sourced from a database. The Retail Price column in this table serves as the base for calculating and populating a Discount Price column using a multiplier specified in a text inp ...

javascripthtmljquerylaravel

Display HTML components depending on an object's property using AngularJS

Here is the code I have created to display a simple drop down list: var products = [ { "id": 1, "name": "Product 1", "price": 2200, "category": "c1" }, { "id": 2, "name": "Product 2", "p ...

javascripthtmlangularjs

What is the best way to trigger a PHP function using a button click event?

One of the functionalities I have is a reset button that's supposed to switch out the JSON data displayed here with a different dataset called defaultStats.json (that I've saved for this purpose). Here's a snapshot of what the current databa ...

phphtmlmysqlsql

The ng-click functionality seems to be malfunctioning when used within the controller in conjunction with ng-bind

After coding, I noticed that my ng-click function is not working. When I inspected the element, I couldn't find ng-click displayed anywhere. Can someone please help me figure out what I'm doing wrong? var app = angular.module('myApp' ...

javascriptangularjshtmlangularjs-controllerng-bind-html

Centering PayPal buttons horizontally with a width specified as a percentage

Take a look at this interactive coding playground showcasing the following React code: import React from "react"; import ReactDOM from "react-dom"; import { PayPalScriptProvider, PayPalButtons, usePayPalScriptReducer } from " ...

cssreactjspaypalpaypal-rest-sdk

Tips for refreshing Facebook's og tags

I've been racking my brains over this issue for days, and despite the abundance of similar inquiries, I have yet to find a solution. On my blog-like website, each post requires its own title and description for Facebook articles. I know I can set the ...

javascripthtmlfacebookweb

Unable to show the table row color using Angular in Internet Explorer

I've customized a table by changing the row color based on a property value, and I'm using ng-repeat to display the rows. Here's my table: <table class="tab table span6 tabhover" style="margin:0;" > <thead> ...

cssangularjsinternet-explorerhtml-table

Exploring the power of Javascript for number lookup

I am currently working on a coding project using TypeScript and JavaScript to locate a specific number provided by the user within a list. The goal is to display whether or not the number is present in the list when the 'search' button is pressed ...

javascripthtmltypescript

Display images that have been uploaded on the page either as a grid view or a list of

In my Reactjs application, I am uploading multiple images to Azure Blob Storage. On a page, there is a button to open the upload form. Once the upload completes, I want to display all these images on the same page. Since the images have different aspect ...

javascripthtmlreactjs

Creating a vertical gradient that repeats horizontally using CSS

Looking for a creative solution using only CSS to achieve a specific background pattern. I envision a gradient that stretches horizontally and repeats vertically with gaps in between each repetition. Here's an example: https://i.sstatic.net/7DLf1.pn ...

cssgradient

Challenges associated with utilizing img src in JavaScript

I am facing a simple issue. I have carInfo data retrieved from a JSON file, but I am struggling to correctly parse the img source stored in the variable $imgsrc instead of treating it as a string called "$imgsrc". This data needs to be appended to my HTML ...

javascriptjqueryhtmlajax

Choose only the values that start with a letter in the autocomplete list

I am currently utilizing the datalist feature for my autocomplete field. Everything is functioning properly. In my list, I have the values james, reeta, and mary. For example, if I type in "r" in the autocomplete box, it shows both reeta and mary because ...

html

Showcase each video stored within a specific directory in the form of a list using HTML 5

I'm working on an application that requires me to showcase a series of videos on a single HTML5 page using the video tag. Despite successfully uploading files to my folder, I am struggling to display them properly. My search for a solution has been fr ...

phphtml

What are the steps to create a basic chrome extension that functions as a countdown clock?

I am a beginner in the world of coding and I am currently working on creating a chrome extension that serves as a timer. My goal is to include the timer within the HTML popup file, allowing users to customize the settings themselves. Do you have any advice ...

javascripthtmljsongoogle-chrome-extension

The addScript feature seems to be experiencing difficulties upon the initial website load

Currently, I am utilizing the jquery.flexslider plugin and it is performing well. However, I have a specific requirement where I do not want to load the plugin for screens that are smaller than 600px. After experimenting with various scripts, I have final ...

javascriptjqueryhtml

The system encountered an error stating that the class 'Database' could not be found

Whenever I try to establish a connection to my SQL database using my pdo_object.php file, I encounter the following error in my model.php: Fatal error: Class 'Db' not found in /path/model.php on line 8 I have double-checked that all permissions ...

phphtmlmysqlsqldatabase

Arranging divs within a wrapper, ensuring that one of them displays a vertical scrollbar when the content exceeds the space available

I'm currently facing a challenge with defining the height of the description box in order to achieve the layout shown. I am trying to find a solution without relying on javascript. https://i.stack.imgur.com/3j278.png At present, the wrapper and titl ...

css