treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Float left inside of a float left

  • Hey guys, I have this page made that looks sort of like this:

    http://img74.imageshack.us/img74/9607/floatleftrl4.th.png

    Three paragraphs, with the first one floated left. Now, i want to ad an image inside that first paragraph. I want the image to not break the flow of the first paragraph (ie, i want the words to text wrap around it.) Kind of like this:

    http://img254.imageshack.us/img254/285/righttz6.th.png

    Instead, I get this, everytime I float the image to the left. I'm strugling with the correct placement of the "float: clear" I believe.

    http://img187.imageshack.us/img187/6430/resultuu0.th.png

    Anyone care to lend a hand?
  • If you want to show us some code (the CSS file and the HTML file of that particular page) it would help greatly. Floating within something that is already floated is perfectly fine, and you should be needing to clear anything until AFTER all of the content there.

    Make sure the class on the image is something like this:

    HTML:
    <img alt=\"\" class=\"fltright\" src=\"images/yourimage.jpg\" />

    CSS:
    .fltright {
    float:right;
    padding: 0 10px 10px 0;
    }


    That should really be about it!
  • Thanks i'll try that. Here was my code before.


    [b]The content[/b]
    #content {
    margin-left: 199px;
    margin-right: 300px;
    padding: 0;
    }

    [b]The first paragraph, I called \"string1\"[/b]
    #string1 {
    float: left;
    width: 300px;
    }
  • How did you float the image?