Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Float a DIV toward bottom-right using CSS

Tags:

html

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;
}
like image 938
Si8 Avatar asked Apr 01 '13 16:04

Si8


People also ask

How do I float a div to the right?

Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.

How do I make my div float to the bottom?

If you put some content in a paragraph tag within a block and want to float a link to the bottom right corner of the block, put the link within the paragraph block and set it to float: right, then put in a div tag with clear: both set just underneath the end of the paragraph tag.

What CSS style floats an element to the right?

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

How do you position a div to the right in a div?

Answer 545f93de631fe934cd005bc2 if a div is fixed or absolute you can use right: 0; to get the div to the right.


2 Answers

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

like image 171
kingkode Avatar answered Oct 10 '22 09:10

kingkode


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;
}
like image 23
searching9x Avatar answered Oct 10 '22 07:10

searching9x