Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    float: bottom-right; - I wish

    Hi Guys

    I have a problem with positioning an image within a div, with text wrapping around it. I have an example of the problem here http://www.designnine.net/test.html.

    If you inspect the html, you will notice I have hacked the image into position at the bottom right.

    Aim: To have the image in the bottom-right of the bodyText div with text wrapping.

    Attempted Solution: Relatively position the element - problem: the text does not wrap.

    I have heard there would be a way to solve this via JS but i don't really have any experience of writing JS, just implementing it.



    Does anyone have any suggestions to solve this seemingly simple request of html?

    Thanks for your time.

  • #2
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    From what I can see in your example: The text is already wrapping the Image and the Image is located at the right bottom of the BodyText.
    Are you sure this is what you meant?

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well what it is, is that there are a number of pages following this page format. All with differing text lengths. What happens is that I have to adjust the padding/margin on the bodyText and bodyImage elements to allow for the differing text lengths.

    Also this is not cross-browser/platform compatible as Macs have varying font sizes etc.

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Really there's no great CSS solution if you want the text to wrap. What I would suggest is doing a little javascript to make it happen:

    First, modify your code to include a little inline span that we can use to shift the image down:

    <div id="box">
    <span id="pushdown"></span>
    <img src="something.jpg" alt="" />
    <p id="boxContent">Text text blah balh blah</p>
    <div style="clear:right"></div>
    </div>

    We'll need to float the shim and the image to make this work, so the CSS would look like this:

    #box img {
    clear:right;
    float:right;
    }
    #box p {
    margin:0;
    }
    #pushdown {
    width:1px;
    height:1px;
    float:right;
    }

    And then the javascript onload to make it all happen:

    Code:
    var img_height = 150; // height of the image to push down
    
    function push_it() {
      var box = document.getElementById('box');
      var pushdown = document.getElementById('pushdown');
      boxHeight = box.offsetHeight;
      pushdown_height = (box_height - img_height);
      pushdown.style.height = (pushdown_height)+'px';
    }
    
    window.onload = push_it;
    Last edited by vtjustinb; 10-08-2007 at 03:55 PM.

  • Users who have thanked vtjustinb for this post:

    dcostalis (10-19-2007)

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Hmm... I don't understand what's wrong with what you have. As long as you have fixed widths and heights, your solution works. If you add more content, your layout breaks anyways, so it's not a big deal.

  • #6
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by Blue_Jeans View Post
    Hmm... I don't understand what's wrong with what you have. As long as you have fixed widths and heights, your solution works. If you add more content, your layout breaks anyways, so it's not a big deal.
    Well in his second reply he mentioned that this layout gets used on multiple pages of varying content size. This, combined with what would happen to firm heights when text is resized, would set the layout up to break pretty easy (at the very least require a lot of maintenance).

    You could make a rough stab at it through ems instead of pixels to handle the text resizing issue, but even still you'd have to adjust the margins page by page and that'd be a pita.

    The only way to do it generically would be a javascript approach like one I outlined above.

  • #7
    New Coder
    Join Date
    Apr 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi guys,

    Sorry for the lack of replies to your suggestions, I have been afk. The site that I have put together can be seen here: www.designnine.net/previews/solarcreative/index.html

    Using my hacky but acuurate method seen in the source of the pages, I have managed to get the pages how I want them. Apart from these two pages:

    http://www.designnine.net/previews/s...eative/tv.html - problem in IE6 with the image being too high.

    http://www.designnine.net/previews/s...ive/small.html - problem in Safari with the image being too low.

    Now I know my method of alignment isnt pretty but it is working in all browsers and platforms apart from those two pages. Can you guys see if there is any reason for it, because I'm sure I can't.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •