What is causing the height:auto property to not function on these two elements?

I am facing an issue where the main-div and footer-div are not growing with the content as expected. While setting the height to auto works fine for the footer, it messes up the page for the main content. Specifically, the footer ends up taking over the entire footer and main content together. The structure of my page looks like this:

<div id="page-wrapper">
 <div id="header"></div>
 <div id="main-wrapper"></div>
 <div id="footer"></div>
</div>

Here is the CSS for each div:

#page-wrapper{
    margin-left:auto;
    margin-right:auto; 
    width:85%;
    -moz-box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    -webkit-box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    border-right:solid 1px #CCC;
    border-left:solid 1px #CCC;
}
#header{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height:200px;
    background-color:#ffffff;

}
#main-wrapper{
    width:100%;
    height:auto; /* this line is the problem */
    margin-left:auto;
    margin-right:auto;
    background-color:#E5E7EE;
}
#footer{
    width:100%;
    height:auto;
    background-color:#ffffff;
}

UPDATE:

Within main-wrapper, there are two additional divs:

#text-wrapper{
    width:60%;
    float:left;
    font-weight:300;
    padding-left:50px; 
 }

#login-register-field{
    float:right;
    width:300px;
    height:260px;
    background-color:#BDBCC4;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
    margin-right:40px;
    margin-top:80px;
    position:relative;

}

Could these inner divs be causing the issue?

Answer №1

Both divs contain no content, and since the default height property in CSS is set to auto, there is no need to explicitly mention it unless it has been overridden by another style rule.

If you intentionally left the divs empty when posting this issue, then whatever is causing the problem may be missing.

There should be no issue with the content growing, as demonstrated in this fiddle

Answer №3

One potential solution could involve utilizing the MAX and MIN height attributes. Here is an example:

#page-wrapper{
    margin-left:auto;
    margin-right:auto; 
    width:85%;
    -moz-box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    -webkit-box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    box-shadow: 6px 0 4px  -4px #888 , -6px 0 4px  -4px #888;
    border-right:solid 1px #CCC;
    border-left:solid 1px #CCC;
}
#header{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    height:200px;
    background-color:#ffffff;

}
#main-wrapper{
    width:100%;
    height:auto; /* this line is the problem */
    margin-left:auto;
    margin-right:auto;
    background-color:#E5E7EE;
}
#footer{
    width:100%;
    height:auto;
    max-height: 100px;
    min-height: 30px;/* or 0 if you want to hide on null content*/
    background-color:#ADFADF;
    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 could be the reason my checkbox won't check using jQuery?

Currently, I am using kojs within my Magento 2 project. I have implemented a method that successfully shows and hides an input box based on user interaction. However, despite the function working as expected, the checkbox does not display its checkmark. D ...

Getting the URL of a CSS background image in NodeJS and Express: A step-by-step guide

I've recently learned that using getComputedStyle in a Node environment is not possible due to it being a browser-specific behavior. Despite this, I am still interested in retrieving all background image URLs within Node and downloading them as shown ...

Generating various header graphics through PHP's header include feature

I'm currently working on a multi-page website that utilizes a header include feature. The background image is already set within a container in the header using CSS, but now I want to have different header images for each page. Since I am still new to ...

Final div class nested within the HTML and styled with CSS

Is there a way to keep the last div (class) from sliding underneath? I applied margin-right to .artist_wrap. I assumed that using overflow: hidden would contain it within #music_videos_wrap, but it just disappears. Any assistance is greatly appreciated. H ...

Is it possible to recognize when the mouse button is held down and the cursor is outside the viewport by using mouseleave detection?

Is there a way to detect when a user moves the mouse outside of the view-port, even if they are holding down the mouse button (for example, if the mouse is on the browser address bar)? In the code below, I am currently using mouseout and mouseleave to det ...

Display the iframe website without it being visible to the user

Is there a way to load a separate website, such as a Wikipedia article, in an iframe on a webpage without freezing up the whole page when it becomes visible after clicking a "show" button? And if not, how can we display a loading gif while the iframe is ...

Obtain distinct tag categories while maintaining their sequence with selenium in C#

I'm currently extracting data from an ePUB bible, where each chapter is in the form of HTML pages. My goal is to maintain the order of specific tags that are scattered throughout the HTML page. All chapters in the bible follow a similar structure like ...

What is the best way to target specific elements within my array using Jquery?

I have a Wordpress website where the posts contain images with the .aligncenter class. I want to style the images that are less than 400px in width by adding the display:inline-block; property and reducing their size to 40%. Here is the approach I tried: ...

Elements in Motion

Working on a parallax effect, I've managed to assign unique scroll speeds to (almost) every element. Moreover, these elements are programmed not to activate their scroll speed until they enter the viewport. Below is the JavaScript code for trigger co ...

What are the best methods for aligning pseudo elements vertically?

I am facing an issue with the placement of a before and after pseudo element for articleSubTitle. The problem occurs when the text from articleSubTitle wraps to a new line within a small container or on mobile devices. This causes the after element to appe ...

The process of verifying email addresses using Angular 5

I'm having trouble validating my email with the .com domain. I've tried various methods, but so far, none have worked. Can anyone provide guidance? I'm new to Angular and struggling with this particular issue. Ideally, I want the email to be ...

What is causing the issue of my oversized images not showing up on GoDaddy?

I recently uploaded my website on GoDaddy and I am facing an issue where some of my small images (sizes: 872 × 546px) are displaying perfectly fine, but the large ones (banners with a size of 2700 × 900px) aren't showing up. Does anyone have ...

Tips for altering the distance between dots on a line

.ccw--steps { margin: 10px auto; position: relative; max-width: 500px; } .ccw--step-dot { display: inline-block; width: 15px; border-radius: 50%; height: 15px; background: blue; border: 5px solid #e8e8e8; position: relative; top: -8p ...

How come WhatsApp is not recognizing my og:tags correctly?

I'm having an issue with my webpage where the og:tags generated for link previews on Facebook work fine, but they can't seem to be scraped by WhatsApp. Even though the tags are correct in the source code of the site, WhatsApp shows an error messa ...

Tips for inserting a PHP variable into an SQL query

Here is the code I'm currently working on: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> < ...

Converting CSS to LESS with multiple classes sharing the same properties: step-by-step guide

I have some CSS code here that I'd like to convert into LESS format. Can you help me with that? .A .B h4, .A .B h4 a, .A .C h4, .A .C h4 a, .D h4, .D h4 a { color: #345e8a !important; display: inline-block; font-family: @font-family-sans ...

Utilize the atan2() function to rotate a div so that it follows the movement of the mouse

I am trying to create an effect where the mouse aligns with the top of a div and the div rotates as the mouse moves. The rotation should happen when the top part of the div is in line with the mouse cursor. My goal is to achieve this using the atan2 functi ...

Sending JSON data to Python CGI script

I've successfully set up Apache2 and got Python running without any issues. However, I'm facing a problem with two pages - one is a Python Page and the other is an HTML page with JQuery. Could someone guide me on how to correctly make my ajax p ...

Need to transfer a variable from the left side to the right side within Javascript. The instructor demonstrated using up and down as an

Recently started learning JavaScript as part of my college game programming course. I am only using Notepad for coding. Currently, I am trying to move an object (in this case, just the letter "o") from left to right on the screen. My professor has provided ...

What is the process of importing an HTML template into a Vue.js project?

I downloaded a template from the internet that I want to import into my vue project. This template includes HTML, CSS, and Javascript files of its own. How can I utilize vue-router to access the index.html file in this template without converting them into ...