newcoder1010 Posted March 20, 2020 Share Posted March 20, 2020 (edited) Hello, HTML: <div class="prop-row"> <div class="views-field views-field-title"> <span class="field-content"> <a href="/node/159" hreflang="en">7x Euclid Avenue Building</a> </span> </div> <div class="views-field views-field-field-main-image"> <div class="field-content"> <img src="/sites/default/files/styles/medium/public/2020-03/town-homes_0.png?itok=_sxYxuaG" width="200" height="200" alt="ggfdg" typeof="foaf:Image" class="img-responsive"> </div> </div> <div class="views-field views-field-field-house-selling-price"> <div class="field-content">$45,345</div> </div> <div class="views-field views-field-field-status"> <div class="field-content">Active</div></div> </div> How can I place the price at bottom left corner of the image and place the status at the bottom right corner of the image? https://docs.google.com/document/d/19hif-4iyf2iMqWEnz0mIKjhKcBxwvZ_f07r11Ux8_8I/edit?usp=sharing Please advise! Edited March 20, 2020 by newcoder1010 Link to comment Share on other sites More sharing options...
Funce Posted March 20, 2020 Share Posted March 20, 2020 If you use position:relative on the div that holds the image, then you can then use position: absolute on the Price and the status and use the combination of the bottom, left and right styles. Take a look at the CSS positioning tutorial for more information. Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 20, 2020 Author Share Posted March 20, 2020 (edited) I made progress. .prop-row { position: relative; } .views-field.views-field-field-status { position: absolute; width: 100px; float: right; margin-top: -30px; } .views-field-field-house-selling-price { position: absolute; width: 100px; float: left; margin-top: -30px; } Both are now inside prop-row element. But status is sitting on top of price. I cant see the price. I do not have any control on html. How can I push status to the right side? Edited March 20, 2020 by newcoder1010 edit Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 20, 2020 Author Share Posted March 20, 2020 One more question. Right now, image is sitting below the title. How can I place the title above the image? Please see the second image in the link. Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 20, 2020 Author Share Posted March 20, 2020 I got the second part working. Please advise on the status element how to float to right. Thanks! .views-field.views-field-title { top: 0; left: 16px; font-size: 18px;position:absolute; } Link to comment Share on other sites More sharing options...
Ingolme Posted March 20, 2020 Share Posted March 20, 2020 Float does not work with absolute positioning, you should use the top, right, bottom and left rules to move an element with absolute position. Instead of left:16px, you would use right:16px to move it 16px from the right of the container. Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 20, 2020 Author Share Posted March 20, 2020 Thank you! I will play with that. Link to comment Share on other sites More sharing options...
Funce Posted March 27, 2020 Share Posted March 27, 2020 On 3/21/2020 at 6:19 AM, newcoder1010 said: One more question. Right now, image is sitting below the title. How can I place the title above the image? Please see the second image in the link. Try using z-index for this one. Higher numbers go on top of lower ones. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now