CODEWITHSUNDEEP
cssposition
Jacob Bloyd
Jacob Bloyd

Reputation: 61

CSS Bottom not working correctly

I have this sidebar that i'm trying to move to the bottom for mobile view devices. However, this isn't working correctly and instead is putting the sidebar at the top of the page. Could anyone help?

<div id="checkoutForm">

*some stuff*

<div id="rightMenu">
<div id="checkoutCart" class="rightMenu__box"> 
*some more stuff*
</div>
</div>

</div>


#rightMenu {
    @media#{$medium-up} {
        float: right;
        width: auto;
        height: 0px;    
    }

    @media#{$small-only} {
        width: auto;
        position: absolute;
        bottom: 0;
        left: 0;
    }
}

#checkoutForm {
    position: relative;
    height: auto;

    *some stuff*
}

Upvotes: 0

Views: 621

Answers (1)

tribe84
tribe84

Reputation: 5632

My guess is that your "some stuff" in #checkoutForm are floating elements causing #checkoutForm not to force a size and subsequently having height 0px and looking like its rendering your absolute positioned element on the top.

Make sure this is not the case, a tried and tested technique to address that problem would be to use clearfix.

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}


<div id="checkoutForm" class="clearfix">

*some stuff*

<div id="rightMenu">
<div id="checkoutCart" class="rightMenu__box"> 
*some more stuff*
</div>
</div>

</div>

Upvotes: 1

Related Questions