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.
/* 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; }
<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>
.trt {
z-index: 9999999999999;
position: absolute;
bottom: 3px;
right: 3px;
}
...
.main .cols .col-cnt { width: 183px; float: right; position: relative; }
...
This CSS worked:
.trt {
z-index: 9999999999999;
position: absolute;
top: 85px;
right: 3px;
}
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.
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.
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).
Answer 545f93de631fe934cd005bc2 if a div is fixed or absolute you can use right: 0; to get the div to the right.
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
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With