weird wrap issue

  • Resolved greg2008

    (@greg2008)


    17 years, 4 months ago

    Ok, so I know CSS and HTML to a decent level.
    I read the tutorials on image/text wrapping, as well as some others around the net (not codex domain)

    I have the required CSS in my themes style.css but I still have issues with this wrapping of text around an image.

    I click add image –> click the image from my gallery, and select align left. The code I get is this:
    [caption id="attachment_74" align="alignleft" width="257" caption="My Caption"]<img class="size-medium wp-image-74" title="imagetitle" src="http://imagesource" alt="My Caption" width="257" height="300" />[/caption]

    (i changed some details above as the img src is long etc)
    Image is displayed fine, and on the left. It will wrap text but only if I have all in one paragraph.
    The moment I press return twice to put some nice spacing in my text, the text after the double space goes under the image, yet there is still plenty of room next to the image.

    So I tried doing my own CSS both in the style, then even tried some inline styling.
    I used a simple div setup of float left, put the image in a floated left div (simple img no caption or anything else), then the text in a floated left div also.
    The result was i couldn’t get the div the text was in to float next to the div the image was in unless I only had one word in the text div, then it did float next to the image div.

    I could of course set a width on the floated text div (total space minus image/div width) but then people increasing page sizes etc etc makes this a bad idea. Fixed widths have to be considered carefully.

    So what am I doing wrong here?

Viewing 6 replies - 1 through 6 (of 6 total)
  • buddha-trance

    (@buddha-trance)

    17 years, 4 months ago

    Did you try adding display:inline; to your .alignleft class?

    Thread Starter greg2008

    (@greg2008)

    17 years, 4 months ago

    yeah.
    One attempt was copying the CSS classes from the default theme style. Still didn’t work.
    It does wrap nicely in the visual editor, just not the blog itself

    Thread Starter greg2008

    (@greg2008)

    17 years, 3 months ago

    There must be a simple solution to this.
    The whole point of wordpress and similar software is to create blogs, especially in a news style.

    So to be able to have an image, then full control over the text next to it is surely one of the most desired features (along with many other things of course).

    So why does it seem so hard to make this work?
    I simply want an image with text next to it, and to be able to have paragraphs within the wrapped text so it looks neat.

    As said, I even tried my own float divs, but just cant get this to work. I would have thought this would be a standard setup thing by default

    buddha-trance

    (@buddha-trance)

    17 years, 3 months ago

    greg,

    give us a link to your site, maybe we can find a way to fix this.

    I just tested on my local copy, and it floats to the left well, allowing for paragraphs of text.

    My code:
    [caption id="attachment_478" align="alignleft" width="140" caption="my caption"]<img src="http://myurl/wp-content/uploads/myimage.jpg" alt="my description" title="my title" width="140" height="135" class="size-full wp-image-478" />[/caption]

    and it’s pretty much what you have.

    Did you try to switch to the default theme and see if it floats properly? Maybe it’s the theme you are using that needs to be looked at.

    Thread Starter greg2008

    (@greg2008)

    17 years, 3 months ago

    I troubleshoot on other forums myself, and know a link to the site always helps, but its all passworded atm.

    I did do some further digging into this style I have and it has some changes from the default themes that are weird.

    I also found the postcontent class for a paragraph has clear both. Maybe that was causing an issue the time I managed to get it to wrap but only for one paragraph

    I’ll have a look into that a bit and see if I can resolve it that way. I’ll also try the default theme as you suggested, as I do think this theme have a few weird issues (it’s the ‘corporate’ one from this site)

    Cheers for the reply

    Thread Starter greg2008

    (@greg2008)

    17 years, 3 months ago

    For anyone reading this, here is my solution

    In my theme’s style.css was the following code :
    .post .postcontent p

    {
	clear: both;
	margin-bottom: 1em;
}

    The clear both on the default P (paragraphs) was indeed making the floated text next to the image drop below the image as soon as I inserted a new line (double return).
    Spacing is of course needed to allow neat spacing in the text, even next to the image.
    I simple commented this line out /* clear: both; */ and now the text still wraps next to the img, but paragraphs don’t break the float.

    Use <div style="clear: both;"></div> whenever you want to clear any floated elements.

    Weird way of doing it, but there you go. I would have preferred to simply be able to press return as many times as I wanted to instert as many spaces (line breaks) as required, but obviously this doesn’t work in the core php of the software.
    Cheers

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘weird wrap issue’ is closed to new replies.