In IE8, displaying an element with jQuery does not cause the footer to be pushed down

I've tried various methods to solve this issue, but none have been successful so far.

To better illustrate my problem, I have created a FIDDLE. When the button is clicked, a hidden element is displayed. However, it does not adjust the footer position and appears below it instead. How can this be fixed?

Even when tested in Chromium, my Fiddle still doesn't work as intended.

HTML

<div class="wrapper">
  <div class="content">
    <div class="text">
      Blablablabla
        <div class="button">
          click me
        </div>
    </div>
    <div class="text2">
      YADAYDAYDAYDAYDAYDAYDAYDA
    </div>
  </div>
</div>
<div class="footer">
</div>

jQuery

$('.text2').hide();

$('.button').on('click', function() {
    $('.text2').toggle();
});

Answer №1

The reason for the overflow of text in the div is due to a set height on your content. To fix this, try adding a min-height to the content div instead.

Check out the DEMO here: http://jsfiddle.net/kevinPHPkevin/fDzqm/2/

.content {
    background:red;
    width:500px;
    min-height:200px;  <= this has now been added
    margin:0 auto;
}

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

Is there a way to stop the MUI Select component's width from increasing when I choose multiple options?

Please check out the demo I created on codesandbox by clicking here View codesandbox demo I have implemented the MUI Select component with various props to enable multiple options selection without a fixed width constraint. Using a grid layout, I have ev ...

vee-validate - Standalone form validation with distinct procedures

I currently have a situation where I am dealing with two forms, each in separate steps and having their own submit button. Using $validator.validateAll() validates all the inputs on the page, but I specifically need validation for each form individually. ...

Learn how to effectively share an image using the Math.random function

Is there a way to display a random number of images on a webpage using JavaScript? Let's say we want to show X number of images, where X is a randomly generated number. For the sake of this example, let's set X to be 10. <input class="randomb ...

Difficulty loading partial view with Ajax in Asp.net MVC Core

After reading through this informative article, I am attempting to dynamically load a Partial View using Ajax. However, I am encountering an issue where the partial view is not being loaded as expected. Important Points to Note: I am utilizing VS2015 wi ...

Tips for transferring a jQuery array to PHP

I am encountering an issue when trying to send a jQuery array to PHP. Initially, I have one form in HTML and upon clicking 'add', I end up with two forms. Afterwards, I input data into the form which is then stored in a jQuery array. However, I a ...

The input element extends beyond the boundaries of the container

When the text is too long, the input exceeds the boundaries of its parent container. I have been exploring ways to wrap the text within the element. I attempted using CSS properties like word-break and text-wrap, but unfortunately, none of them produced t ...

How to effectively utilize Python to compare HTML files

Can the HTML be compared differently as shown below? html_1 = "<h1>text<h1>" html_2 = "<h2>text<h2>" Using Google's diff_prettyHtml may not yield accurate results. If I want to say that 1 has changed to 2: <h <del styl ...

Adjusting the width of input textboxes for alignment

I currently have a set of input textboxes that I have attempted to align using CSS with the {width: xxx px;} property. However, this method is unreliable as it does not consistently ensure proper alignment. <style> #left_col p { margin-top: 15px ...

Failure to trigger bind action in connector.php for elfinder, a Javascript file manager plugin

function log() { $data = array( 'folder_id' => 1, 'user_id' => 1 ); $this->Folder_model->share($data); } function access($attr, $path, $data, $volume) { return strpos(basename($path), '. ...

Limit the text input area in HTML to a fixed size, preventing any text from exceeding the specified boundary

Is there a way to create a fixed line text area that limits the user from typing beyond a certain number of lines and maximum width? My current CSS styling for this is as follows: .area-style { resize: none; width: 324px; height: 200px; m ...

react-full-page is causing my webpage to not open in a specific ID location, such as http://localhost:3000/#someIdWhereIWantThePageToBeOpened

I'm currently utilizing the react-full-page package and while it's almost working well, I've come across two issues: After clicking on an anchor link like <a href='#someId'>Go There</a>, the scroll goes to the designat ...

What could be causing the issue with the width: 100% not rendering correctly in this

I'm currently working on my footer, but I'm having trouble getting the width: 100% tag to work correctly. Here's a screenshot of what I mean: http://gyazo.com/9c23897cd7b9a74ca55ee9fb977f810c This is my CSS code: /*..Portfolio - Lars Beut ...

Having trouble updating jQuery due to the inability to locate the suitable jquery.ui.core version

I am currently working on a MVC project using Visual Studio 2012. I recently performed an Updates package by going to tools > nuget package manager > manage nuget packages for solution > nuget.org > update all. The process seemed fine, but at t ...

Utilizing Jquery queue for running a series of Ajax requests; imperative to clear the queue in case of a failed request

I am currently working on creating a queue of ajax calls that need to be executed in order. The process seems to be functioning properly, but I am encountering an issue when there is an error in one of the calls. My goal is to stop the queue after an error ...

The HTML Canvas arc function fails to properly align curves

UPDATE Upon further investigation, I've discovered that this problem only occurs in Chrome. Could it be a browser issue rather than a coding problem? I'm working on creating a circle with clickable sections using HTML5 Canvas. The circle itself ...

Step-by-step guide to layering two divs within a table cell

Here is the code I am working with: <td class="mobile-user-icon"> <span class="mobile-photo">background text</span> <span class="mobile-caller-mute">overlay text</span> </td> .mobile-user-icon { width: 64px ...

Display search bar when scrolling down and hide it when returning to the top of the page

I'm looking to implement a sticky search bar that appears at the top of the page when users scroll down. The landing page already has a search box, so I only want the sticky search bar to show when the original search box is out of view. When the sear ...

Can you help me with compiling Twitter Bootstrap 3.0 on my Windows 8?

Can anyone guide me on compiling Twitter Bootstrap using Less on a Windows machine? I tried following a tutorial but ran into issues with installing lessc (it was not in the npm registry). Also, the tutorial was for BS2 and not 3.0 which made me skeptical ...

When printing a table in HTML/CSS, only the header will appear on the empty page

I'm struggling to figure out why there are two pages, one blank and one with just the table header in this document. The content looks fine otherwise, but I can't seem to remove these extra pages. Here is the full HTML code: <!DOCTYPE html& ...

The radio buttons fail to function properly or update when clicked

Seems like I am facing a strange issue....it seems simple (and trivial for some) but it just won't work. I have a basic div with some radio buttons that are not changing state when clicked... <div id="payments_tab" class="tab-pane fade" data- ...