Results 1 to 4 of 4
  1. #1

    CSS Float Problem...


    I'm trying to float a image at the bottom of a content box and have the text wrap around it... The problem is I can't get it to the bottom, as I already have some floats at the top of the content box, and trying to position it relatively just makes the text stop wrapping! I can't do absolutely as the content box is a variable height... < the site...

    Any ideas? Thanks a lot if you can suggest a solution...


    p.s. Please ignore the messiness of the code - I haven't tidied it up yet!

  2. #2

    To float your image you need to place your text within <p> paragraph tags and then have a containment area like so:

    PHP Code:
    <div id="content">
    div style="position:absolute; top:150px; left:200px; border-style:Solid; border-color:#840A0A; border-width:2px; width:50%; z-index:1; background:#FDE981; padding:5px; padding-top:8px;">
    img width=105px height=20px src=trans.png class="floatleftClear">
    img width=95px height=20px src=trans.png class="floatleftClear">
    img width=85px height=20px src=trans.png class="floatleftClear">
    img width=75px height=20px src=trans.png class="floatleftClear">
    img width=50px height=20px src=trans.png class="floatleftClear">

    p>Your textur text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text  <img class="floatRight" src="bookrose.png"here Your text here Your text here Your text here Your text here Yo here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here Your text here </p>

    use as extra css:

    #content {margin: 0px 20px 0px 20px;}
    #content img.floatRight { float:right; margin: 10px; position: relative; z-index: 0; margin: 10px 30px 10px 10px;}
    Then you can mess around with it till you get what you like.



  3. #3

    That kind of works, but means the image has to be re-inserted on every single page in the right place.

    Is there any way to do it so that it can just be put in either at the top or bottom of the content so it can be put in an include around the content?


  4. #4

    You can easily put it in an include that will appear around your content - but by the very nature of the float it will not allow the text to flow around it - this you have to do by the example given.

    Otherwise the text will just flow up against the content container - which is probably what you are experiencing from your email?


Posting Permissions

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