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 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Super Ragged Floats: Text Wrapping

    Howdy,
    Here is the site I am working on:

    http://www.hellocutiepie.com/testingtheball/index.html

    I am working off of this tutorial:
    Super Ragged Floats

    I have my image (in red) as a background image in the bottom right hand corner.

    I then added the green divs on top of the background image.

    I am trying to get my text to wrap around my divs and background image.

    The background image divs, however, just sit below my text.

    How can I get my text to wrap around the divs and background image?


    Thanks,
    PoJ

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    With regards to #flowing, you can’t put block-level elements inside inline elements. There’s also no need to declare floated elements as display: block since floated elements are automatically declared to be block-level.

    That said, you need to kill the div element surrounding the “ragged floats” because it will be in the shape of a rectangle since, again, inline-level elements cannot contain block-level elements. To get the text to flow around the floats, you also need to move the floats into the same container as the paragraphs (#content) and somewhere besides the end (e.g., the beginning, but after #headingunderline).

    There are un-related issues with your code efficiency as well. For example, you declared bottom: 0% and right: 0% yet those two properties do nothing if the element is not absolutely or relatively positioned. Another example: #headingunderline is being applied to a h1 element via a containing div; the container is not necessary and the ID would make more sense attached to the header element itself. The CSS is also using redundant and expanded declarations that would be better removed or condensed.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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