Issue with CSS heights on WordPress pages with relative positioning

Currently, I'm utilizing the position:relative and top:-120px properties to shift the header background image below two header <div/>s. This method is effective in achieving the desired layout. However, I had to adjust the position of the wrapper <div/> and footer <div/> by 120 pixels as well to ensure proper alignment. Despite this, an issue arises at the bottom of the page where there is an extra 120 pixels of space beneath the footer. How can this excess space be eliminated easily? Are there alternative CSS techniques involving the position attribute that could produce similar results? Feel free to check out my site:

Answer №1

Try this solution:

.container {
    position: relative;
}
.header {
    margin-top: -50px;
}    
footer[role="contentinfo"]{
    position:relative;
}

Answer №2

My initial thought was to suggest removing #headerbg, but I see that it serves a purpose in maintaining the aspect ratio of the header as the page scales down.
When faced with a similar situation, I prefer not to position the "background-image" directly, but instead set the wrapper to position:relative and make #headertop & #menubar position:absolute. By doing this, the top and menu elements are taken out of the document flow, allowing the background image to do its job.

.site-header {
  position:relative;
  ...
}
#headertop {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 z-index:1;
...
}
#menubar {
 position:absolute;
 top:80px;
 left:0;
 width:100%;
 z-index:1;
 ...
}
#headerbg {
 display:block;
 height:auto;
 width:100%;
 /*
 position: relative;
 top: -120px;
 z-index: 0;
 */
}
#headerbg img {
 display:block;
 width:100%;
 height:auto;
}

Answer №3

To counteract the impact of relative positioning, you can utilize the margin-bottom property:

footer[role="contentinfo"]{
    margin-bottom: -120px;
}

Answer №4

In the event that you have purposefully adjusted the footer position upwards by 120px, you can utilize this method to eliminate the empty space underneath it.

footer[role="contentinfo"] {
    margin-bottom: -120px;
}

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

Leverage the power of Bootstrap by incorporating not one, but two carousels on a single page - one featuring a single item per

I have a unique challenge with using multiple Bootstrap Carousels on my WordPress website One of the carousels features one item per slide, while the other carousel has three items per slide, moving one item at a time in a cyclical pattern like this: [1, ...

Troubleshooting issue with JQuery AJAX loading Bootstrap Dropdowns

I have a website on GitHub Pages that uses Bootstrap, but I'm having issues with the drop-down menu in the navbar. Sometimes it works and sometimes it doesn't. I am using $("#nav").load("url"); to load the navbar so that I can make changes and ha ...

The Hamburger Menu Opens Smoothly But Refuses to Shut Down

Below is the HTML code for my website. I have managed to open the hamburger menu with the code, but I am facing an issue where it won't close. I have checked the HTML structuring using a validator and found no errors. Additionally, I have reviewed my ...

Eliminate any blank spaces in the SELECT Angular application for IE-CSS

One issue I encountered is removing the default selected "SELECT" option from a select drop down on my webpage. Currently, I am using to remove it successfully in Chrome and Firefox browsers, but unfortunately IE does not respond to this method. I ha ...

Error accessing property 'offsetwidth' of null in Google Maps JavaScript API

I am currently utilizing the Google Maps JS API to showcase a map on my website. However, I am encountering an issue where the website is displaying an empty card and upon inspecting the elements, I came across the error message: Cannot read property &apos ...

How come my div or navbar doesn't extend all the way to the right side of the screen?

I'm having trouble getting my div and navbar to stretch all the way to the right at 100% width. Despite setting it up that way in the CSS, it seems to stop short of reaching the edge. Here's a screenshot of what I'm seeing: screencap CSS ...

Is there a way to dynamically modify a website's default viewport settings in a mobile browser?

When viewing a website in Landscape mode, everything looks good. However, switching to Portrait mode displays the message "Screen size not supported." I decided to test this on my desktop browser and discovered that adjusting the initial-scale:1 to initial ...

What is the best way to design a filter search function to simultaneously search through information from two separate columns within a table

Currently, the search function is only searching within the first column of a table. The code for this search function was adapted from w3schools. Here is the JavaScript code snippet: function myFunction() { // Variables var input, filter, table, tr ...

Are background styles complete without incorporating quotations?

Let's say I want to include a background image, my code might look like this: background: url(/images/button_bg.png) repeat-x scroll left bottom #146BAE However, when I check the code in Firebug, it shows: background: url("/images/button_bg.png") r ...

Please enter only numerical values using jQuery

Currently, I am facing a slight issue. My goal is to only run the code when the input characters are numbers. This is the snippet of code I have been working with: $(".jq-sales, .jq-variablecosts, .jq-fixedcosts, .jq-additional-sales, .jq-sales-units, .j ...

Unable to adjust the width of a Bootstrap table

I'm currently working with a bootstrap table that looks like this <table class="table table-bordered table-striped table-highlight"> <tbody> <tr> <td align="center" style="width:30%"><input type="text" class="form-control ...

What is preventing me from modifying the styling of select options in Internet Explorer 8?

I am trying to change the font style in a select-option box. After testing in IE6, Chrome, and Safari, it is working fine! However, I encountered an issue with IE8 where the font style was not changing. The following code did not work: <select name= ...

input group in bootstrap with text select and button

I am looking to implement this design using Bootstrap CSS: To test my code, I have created a JSFiddle: http://jsfiddle.net/xr4uofje/ <div class="container"> <div class="col-lg-6"> <div class="input-group"> <input class="i ...

Container Floating, Margin Collapse, and Block Formatting Contexts

To truly grasp the function of a block formatting context, I am exploring what happens when one is not created. I found an interesting demo in the article "Everything you Know about Clearfix is Wrong: .wrapper { width: 740px; background: #ccccc ...

Recently, there has been an issue with the size of SVG images specifically on Android Chrome

UPDATE: I have narrowed down the issue to two SVG images that can be found here: . Strangely, Chrome on Android is displaying the second SVG image underneath the first. Take a look at this screenshot of the incorrect rendering on the Chrome browser for And ...

How to harness the power of loops in JavaScript

Having trouble getting this code to repeat a CSS transition properly. for (var i=0 ; i<4 ; i++){ setTimeout(function() { $('#top-left').css('margin', '45px 0 0 45px'); $('#top-mid' ...

What is the best method to vertically center a container in bootstrap 4 at a specified height?

I'm trying to center a container in Bootstrap 4. I have an element with a width of 300px. .guide-background{ background: url("https://www.webascender.com/wp-content/uploads/executive-guide-1.jpg"); background-repeat: no-repeat; backgrou ...

Increase the right border size by half when the image is being hovered over

Seeking assistance with creating a hover image with a right border of color #000 that covers only 80% of the image's full length. I have attempted adjusting other "half border" codes for this purpose without success. Any suggestions on how to achieve ...

Select2 functions properly on online coding platforms like Fiddle but encounters issues when running on

I decided to incorporate Select2 (Source: ) for the purpose of selecting and tagging. After studying an example on JsFiddle I attempted to reproduce it on my local server (xampp). Below is the code, mirroring that of the fiddle. <!doctype html> &l ...

How to keep a button active using CSS in a different area of the webpage

I'm new to coding in javascript and I could use some assistance solving an issue on my test website. The problem involves creating a top menu with an active button that stays highlighted when clicked. In this case, I specifically need the active CSS c ...