SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    keep the image to the right of what it's floating right of somehow

    very simple question i'm sure.

    with this:
    Code:
    <div style="border:1px black solid;">
    	<p style="float:left; margin-right:10px; text-align:right;">
    		Some text here, some <span style="display:block">text here, text here.</span>
    	</p>
    	<div>
    		<img src="" height="40" width="60" style="background-color:red" />
    	</div>
    </div>
    the image goes to the right of the two lines of text as wanted. the outside div box which has a border on it expands the entire width of the page -- and to make the outside div wrap neatly round its contents, i know what to do: add float:left on it like so: <div style="border:1px black solid; float:left">. but then the damn image doesn't stay to the right of the text, it jumps down below the text. what to do to make the image stay to the right and have the wrapping outside div box wrap neatly round its contents? (preferably without specifiying width on the outside div if pos).

    thanks.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try moving the image code before the paragraph, and float it to the right without the div surrounding it, then apply the correct right margin to the unfloated paragraph :
    Code:
    <div style="border:1px black solid;">
    	<img src="" height="40" width="60" style="background-color:red; border:1px solid black; float:right" />
    	<p style="margin-right:70px; text-align:right;">
    		Some text here, some <span style="display:block">text here, text here.</span>
    	</p>
    </div>

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ah yes, you're absolutely right, that does it (with float:left on the outside div that is). great, thanks .

  4. #4
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    actually no, this isn't working so well. it goes more wrong in some browsers, including ie, than the specifying the width method goes wrong. i'll have to make a test case or something and post it and ask about that... thanks.

    i'm always amazed how hard the simplest of things in css can be sometimes. *sigh*

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnyboy View Post
    it goes more wrong in some browsers, including ie, than the specifying the width method goes wrong.
    The code snippet above works fine for me in FF, IE and Opera - if this is part of another layout, then there may be external factors affecting this.

  6. #6
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    The code snippet above works fine for me in FF, IE and Opera - if this is part of another layout, then there may be external factors affecting this.
    i've done a few different versions, stripped down -- no other elements/style -- and am waiting for browsershots to show me the results.

    the test page is here: www.hdbatik.co.uk/tmp/test.html

    the fourth, last one, is your suggestion Centauri, with float:left on the containing div box (the third one is the same but without the float:left on the containing div box). i only have mac safari and mac firefox. the fourth one looks fine in safari but not in firefox (the box is spreading across the whole page). the only one that looks ok in both is the second one (which is basically how i had it to start with on the proper version of the page and which prompted this question) -- that method, the method one, went wrong in a few browsers (the image dropped down, presumably because the width i specified wasn't quite wide enough in some browsers -- were i to just choose a safe wide enough value i think the image wouldn't drop down, but then that will cause an excessive gap in some other browsers, and it always seems rediculous/outright-wrong to have to specify the width in these kind of situations; you want the box to be the width of the contents not the width of a specified number).

    anyway, i'm awaiting browsershots' output and will report. thanks

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't realise you wanted the outer div to shrinkwrap. The right float can be avoided altogether by using the image as a background to the containing div, and setting a right padding so contents avoid the image :
    Code:
    <div style="border: 1px solid black; float: left; background: url(pic.jpg) no-repeat right top; padding-right: 70px; min-height: 40px;">
    <p style="text-align: right; ">
    Some text here, some
    <span style="display: block;">more text here, text.</span>
    </p>
    </div>

  8. #8
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    i feel like a nigley complainy t**ser now, but is there anyway to do it so the image is part of content rather than style? :/ i will admit i'm near the point of not caring about correctness, so long as it looks ok, but the image in question is definitely content not style.

    but yes, that last one certainly _looks_ right and ok (in my two browsers anyway).

    thanks very much Centauri.

  9. #9
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about :
    Code:
    <div style="border: 1px solid black; float: left; min-height: 40px; position: relative;">
    <img src="pic.jpg" style="position: absolute; top: 0; right:0;" alt="" height="40" width="60">
    <p style="text-align: right; padding-right: 70px; ">
    Some text here, some
    <span style="display: block;">more text here, text.</span>
    </p>
    </div>
    ?

  10. #10
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh god, even if i don't care about the content/style issue of the image, i've now realised i need the image to act as a link (which obviously i should have stated up front but i didn't foresee not mentioning that as a problem -- sorry about that), so the image now has to be content not as a background image really.

    blimey oh riley.

    any ideas? be much 'preciated. thanks.

    [edit: oops sorry, posted this without having seen your last post Centauri -- will have a go with that -- thanks very much]

  11. #11
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnyboy View Post
    [edit: oops sorry, posted this without having seen your last post Centauri -- will have a go with that -- thanks very much]
    Just wrap the <a> link around the image, and move the style to the <a> - should work.

  12. #12
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,292
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    praise the lord. it looks good. in both firefox and safari (both mac), with a link on the image. so all's cool. have submitted to browsershots. fingers crossed. thanks very much for your help/time Centauri.


Bookmarks

Posting Permissions

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