Grow your CSS skills. Land your dream job.

Float left inside of a float left

  • # December 29, 2008 at 1:14 pm

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

    [img]http://img74.imageshack.us/img74/9607/floatleftrl4.th.png[/img]

    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:

    [img]http://img254.imageshack.us/img254/285/righttz6.th.png[/img]

    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.

    [img]http://img187.imageshack.us/img187/6430/resultuu0.th.png[/img]

    Anyone care to lend a hand?

    # December 29, 2008 at 1:29 pm

    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:

    Code:

    CSS:

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

    That should really be about it!

    # December 29, 2008 at 4:35 pm

    Thanks i’ll try that. Here was my code before.

    Code:
    [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;
    }

    # December 29, 2008 at 5:26 pm

    How did you float the image?

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".