Question

I’m having a frustrating problem where I’m trying to set a style on a link so that it always appears 10px from the bottom of the box it is in. For some reason the margin-bottom style I have applied to it is not working…the weird thing is that margin-top, margin-right and margin-left all work, but when I put margin-bottom it doesn’t register.

I’m sure it’s likely something stupid I’m missing, but I’ve spent far too long trying to figure out it and trying different combos but can’t seem to get it to work!

I’ve tried applying the class style directly to the link tag, and also wrapping a paragraph day around the link and applying the class to it. The paragraph method works in that it positions it to the right like I want, but again it is not applying my margin-bottom: 10px;

Any ideas as to what I’m doing wrong?

Below are snippets of the html for the boxes, as well as the css I’m using. Any thoughts/suggestions would be greatly appreciated!

Thanks!

HTML:

   <div id="boxes" class="container">
        <div class="box" id="box1">
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac viverra orci. Etiam volutpat lectus vitae tellus blandit volutpat. Maecenas ante quam, scelerisque et tempor ac, varius id eros. Integer hendrerit pretium feugiat. </p>
            <a href="#" class="c2action">link</a>
        </div><!--box1-->

        <div class="box" id="box2">
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac viverra orci. Etiam volutpat lectus vitae tellus blandit volutpat. Maecenas ante quam, scelerisque et tempor ac, varius id eros. Integer hendrerit pretium feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            <p class="c2a"><a href="#">link</a></p>
        </div><!--box2-->

CSS:

     html, body, div, span, applet, object, iframe,  
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
    a, abbr, acronym, address, big, cite, code,  
    del, dfn, em, font, img, ins, kbd, q, s, samp,  
    small, strike, strong, sub, sup, tt, var,  
    b, u, i, center,  
    dl, dt, dd, ol, ul, li,  
    fieldset, form, label, legend,  
    table, caption, tbody, tfoot, thead, tr, th, td {  
        margin: 0;  
        padding: 0;  
        border: 0;  
        outline: 0;  
        font-size: 100%;  
        vertical-align: baseline;  
        background: transparent;  
    }  

    body {background: #FFFFFF; font-family: Arial, verdana, sans-serif;}

    .container {margin: 0 auto; width: 940px;}



    .box{
        width:296px;
        height:270px;
        float:left;
        background-color:#ebe1bf;
        margin-top: 20px;
        border-style: solid;
        border-width: 2px;
        border-color: #e0d6b2;
    }

    .box h2{
        font-size: 16px;
        margin-top: 18px;
        margin-left: 24px;
        color: #353535; 
    }

    .box p{
        margin-top: 10px;
        margin-left: 24px;
        width: 252px;
        font-size:13px;
        color:#525151;
    }

    p.c2a{
        text-align:right;
        margin-bottom:10px;
        font-size: 14px;
        color:#00FF00;
    }

    .c2action a {
        text-align:right;
        margin-bottom:10px;
        font-size: 14px;
        color:#FF0000;
    }

    #box1{

        margin-right: 20px;
    }

    #box2{
        margin-right: 20px;
    }

Answer 1

Give the containing box position:relative; and give the links position:absolute; bottom:10px; right:20px. See https://jsfiddle.net/Ltnmv/.