How to make the parent div stay the same height, lenght and position

Hello, my the code constantly changes between the letters A, B and C, and when using the jQuery .slideDown() event, my dom moves every time it changes from one letter to the other. Can you fix this with CSS, so that the parent div stays the same size and position no matter what, so the dom doesn’t move when it changes between the letters? (My CSS code didn’t fix it!)

// CSS
position: relative;

#quotes {
  display: none;
  position: absolute;
<div class="quotes-div" id="quotes-div">
                        <h1 class="quotes" id="quotes" style="color:green;">Det</h1>
                        <h1 class="quotes" id="quotes" style="color:green;">virker</h1>
                        <h1 class="quotes" id="quotes" style="color:green;">sku</h1>


 <script type="text/javascript">

    (function() {

        var quotes = $(".quotes");
        var quoteIndex = -1;
        function showNextQuote() {
            quotes.eq(quoteIndex % quotes.length)
                .fadeOut(1400, showNextQuote);

all elements within the DOM have relations to each other, i need to see how the this slideshow affects the rest of your page.

please put your code here:,js,output

and share the bin, so i can have a look

It should be in there now

The url changes when you make change to someone else his bin, i just gave you the bin to make things easier for you.

you could make quotes-div have an absolute position, this way, it taken out of the normal document flow. Given you don’t have much else, this is a viable option.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.