WordPress.org

Ready to get started?Download WordPress

Forums

CSS Floating Divs to the bottom inside a Div (15 posts)

  1. tobybowes
    Member
    Posted 1 year ago #

    Hello again, Im a little stumped with positioning and floating divs.

    What I need to have is a container div with some content in it, and then another inner div/img in the bottom right hand corner. The container div has a variable height and any text must wrap around the div/img. I've posted the basic code below, I basically want to float the image to the right and align it with the bottom of the container div but this isn't as simple as I first thought, they should really implement a 'sink'. Hopefully someone can help. I've tried many methods and actually got it in the right spot before but with text not wrapping around it.

    <div class="container" width="50%" height="50%">
    <div class="art-image" width="75px" height="75px">
     <img src="image.jpg" width="75px" height="75px">
    </div>
    Content to wrap around image here
    </div>
  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try

    .art-image {
     position: relative;
    }
    
    .art-image img {
     position: absolute;
     bottom: 0;
     right: 0;
    }

    http://www.w3schools.com/Css/css_positioning.asp

  3. J
    Member
    Posted 1 year ago #

    Hi Toby,

    Do you have a link to the example? If not the code below maybe what your after?

    .art-image {
    float:right
    position:relative;
    bottom:0
    }
  4. tobybowes
    Member
    Posted 1 year ago #

    Sorry neither of them worked, just quickly typed out a dummy code and uploaded it on the link below. The blue div is currently float right and wrapping text, but I need to move it to the bottom right corner remembering the height is variable.

    http://www.tobybowes.karoo.net/test/tester.html

    I can implement any further ideas and re upload to show the results if working or not.

    Thanks for the help so far anyways!
    James (tobybowes)

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try

    .container {
     position: relative;
    }
    
    .art-image {
     position: absolute;
     bottom: 0;
     right: 0;
    }
  6. tobybowes
    Member
    Posted 1 year ago #

    Thats got the art-image to the right spot again, but it doesn't wrap the text regardless of wether I leave the float element in or not (I think the position element just overwrites it if its left in). Re-uploaded results.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Wrap your text in a paragraph element, then move the <div class="art-image"> below the paragraph.
    E.g

    <div class="container">
    <p>
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    Content to wrap around image here
    </p>
    
    <div class="art-image">
    IMAGE HERE
    </div></div>

    Then remove all positioning on <div class="art-image">, but keep the float right.

    Then add overflow: hidden; to <div class="container">
    E.g

    .container {
     overflow: hidden;
    }
  8. tobybowes
    Member
    Posted 1 year ago #

    Its now aligned below the paragraph not wrapping in the corner. Re-uploaded

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Put

    <div class="art-image">
    IMAGE HERE
    </div>

    Wherever you want inside the paragraph.

  10. tobybowes
    Member
    Posted 1 year ago #

    That cuts the paragraph and inserts it in the top right on the next part again. Re-uploaded

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    Move it around in the paragraph until you get your correct position.

  12. tobybowes
    Member
    Posted 1 year ago #

    Thanks for the help but that doesn't work, placing it at the beginning puts it in the top-right and wraps the full paragraph, placing it in the middle puts the first part of the paragraph above and then wraps the remaining with it in the top-right, and placing it at the end but still inside the paragraph places it below the paragraph again in the top right.

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    I don't think what you're asking is possible, to seek better advice you should try a forum that specialises in CSS
    http://csscreator.com/forum

  14. tobybowes
    Member
    Posted 1 year ago #

    During my hunt for an answer to this ive heard alot about negative margins or applying js to the art-image to send it to the bottom but neither have been explained from what ive found. The positioning that you showed me first is the closest I've got to an answer but with no wrapping it again is no good.

    Thanks for all your help I shall pop over there and see if they can help

  15. tobybowes
    Member
    Posted 1 year ago #

    So's not to leave this thread unanswered, I got the desired effect answered over at sitepoint, its not perfect but does the job.

    http://www.sitepoint.com/forums/showthread.php?883631-CSS-Floating-Divs-to-the-bottom-inside-a-Div

Topic Closed

This topic has been closed to new replies.

About this Topic