/    Sign up×
Community /Pin to ProfileBookmark

I could’ve sworn

I hit the reply button… Darn it…
My CSS isn’t working right. I want the photos to be on the left and the text to be on the right and below it. Does that make sense? I basically want to text wrap…

[upl-file uuid=425f2546-23d4-4a49-9364-4437adafa958 size=3kB]links.txt[/upl-file]

to post a comment
CSS

4 Comments(s)

Copy linkTweet thisAlerts:
@nkaisareMay 21.2003 — <p class="this"><img src="img.gif" alt="Image description">This text runs to the right of the image and then wraps below it if its too long. For this you will need to float the image. Provide borders to the image to keep the text clear off the right and bottom edges.</p>

And your CSS:

p.this img {float: left; margin: 10px}

NOTE
-----


  • 1. The paragraph will NOT flow to the bottom edge of image if there isn't enough text content. This may be important if you are using a background for p.this.


  • 2. Use clear:left for the content that follows this paragraph. As before, clear-ing is not required if paragraph flows more than the height of the image.
  • Copy linkTweet thisAlerts:
    @stargal98authorMay 21.2003 — Thank you for the fast reply. I changed it, but it still isn't working. Am I not putting it in correctly???

    [upl-file uuid=e5021af2-bb70-461a-a0a3-bfc0f364812a size=4kB]links.txt[/upl-file]
    Copy linkTweet thisAlerts:
    @nkaisareMay 21.2003 — Sgal, there are a bunch of errors in your HTML. First of all, you have the image and text in two table cells. The two table cells will ALWAYS be displayed side-by-side like this:


    -------------</H2>
    | | |<br/>
    | | |
    <H2>| | |
    -------------</H2>


    This is part of your code: (first table row in your nested table, just below the image map):

    [b]<[u]TD[/u] align="left"><A href="www.ohiowholesale.com"><p class="this">[/b]

    This is incorrect. You cannot nest <p> a block level element within <a>.

    [b]... border=0></a></td>[/b]

    Note that you had this <p> within a <td> (which I've underlined in previous comment). Adding this </td> automatically ends the paragraph. So technically your paragraph has ended here. Hence it is VERY IMPORTANT to nest your elements correctly.

    <p><b><a>...</b></a></p> is NOT OK

    <p><b><a>...</a></b></p> is OK.

    [b]<tr><td><p>Ohio Wholesale, Inc...[/b]

    Note that this is in the adjecant table cell. This will not work as you intend.

    WHAT TO DO?
    ----------------


    Get rid of the nested table. Instead, use the following:

    <p class="this"><img...>Ohio Wholesale, Inc. is known throughout the giftware industry as providing the LOOK, the QUALITY, and the PRICE of great wholesale products. If you haven't already, do yourself (and your customers) a favor by registering with this company.</p>

    <p class="this"><!-- Repeat as many times as desired -->

    What about the CSS?

    p.this img {float: left; margin: 10px}

    p.this {font-size: 10[b]pt[/b]; font-family: Georgia,[b]serif[/b]; clear: left}

    Notes:

    1. You need to add clear:left to any other <p> that will appear below the <p> with floated image. Else the new para will also be displayed besides the image if the text (of the "original" para) spans height less than image height.

    2. If things don't appear to be spaced enough, add margin-top style.

    3. Using pt for screen medium is a bad idea. It will work for you though. I dont want to add that info in this tread... it'll just get complicated.
    Copy linkTweet thisAlerts:
    @stargal98authorMay 21.2003 — Thank you for your speedy reply. I'm going to make those changes, thanks!
    ×

    Success!

    Help @stargal98 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...