CODEWITHSUNDEEP
htmlcss
Si8
Si8

Reputation: 9235

Float a DIV toward bottom-right using CSS

I have three DIV and inside the DIV, I would like to float the "Learn More" to bottom right so it will be on top of the grey background.

three div

CSS

/* the div for LEARN MORE */
#trt {
    z-index: 9999999999999;
    position: relative;
    float: right;
    bottom: 0; // not working
    top: 12; //not working
}

/* the entire div */
.main .cols { padding-left: 2px; padding-right: 0px; padding-top: 10px; }
.main .cols .col { width: 315px; height: 108px; float: left;  background: url(images/tempf.png) no-repeat 0 0; }
.main .cols .col:after { content:''; width: 100%; clear: both; }
.main .cols .col + .col { padding-left: 20px; }
.main .cols .col img.hid { float: left; width: 129px; height: 108px;  }
.main .cols .col-cnt { width: 183px; float: right; }
.main .cols .col .more { font-weight: bold; color: #0206AA; }

HTML

<div class="main">              
    <section class="cols">
        <div class="col">
            <a href="link.aspx">
                <img class="hid" src="css/images/orgNews.png" alt="" />
            </a>
            <div class="col-cnt">
                <h3 style="color: #FFFFFF;">Organization News</h3>
                <p style="color: #FFFFFF;">Interfaith Medical Center related news and updates</p>
                <div id="trt">
                    <img src="css/images/arrow.png" width=11 height=11 align=absmiddle />
                    <a href="link.asp" class="more">Learn More</a>
                </div>
            </div>
        </div>
    </section>
</div>

CSS - After Edit

.trt {
    z-index: 9999999999999;
    position: absolute;
    bottom: 3px;
    right: 3px;
}
...
.main .cols .col-cnt { width: 183px; float: right; position: relative; }
...

after edit

This CSS worked:

.trt {
    z-index: 9999999999999;
    position: absolute;
    top: 85px;
    right: 3px;
}

Upvotes: 13

Views: 72938

Answers (5)

Cal37
Cal37

Reputation: 98

Maybe use position: absolute; instead of relative

Upvotes: 1

nagoor
nagoor

Reputation: 13

change position as fixed like following:

position:fixed;

it should work.

Upvotes: 0

searching9x
searching9x

Reputation: 1625

First at all, you must set parent of #trt to relative.

#parent-of-trt  {
   position: relative;
}

And set #trt to absolute

#trt {
   position: absolute;
   left: 4px;
   bottom: 5px;
}

Upvotes: 6

Michael
Michael

Reputation: 7092

Your float: right isn't working because of a width issue on the #trt div. Basically it's extending 100% of the width and so it can't technically go left or right. Instead of floating, just use...

#trt { text-align: right; }

???

As for getting it pushed down onto that grey line, add some margin-top to #trt to do that...

Other solution would be to use position: absolute; but would be less preferable.

Upvotes: 3

kingkode
kingkode

Reputation: 2219

set col-cnt div to position: relative set trt to position: absolute; bottom:3px; right:3px; that should get you where you need to be.. also, trt should be a class if it is being reused

Upvotes: 13

Related Questions