Forums

images don't float (6 posts)

  1. carleswwwisibility
    Member
    Posted 2 years ago #

    Hi,
    i have a problem with images in my blog.
    When I add new images in my posts, the text appears above and below them.
    I'd like to put this text around the pictures.
    When I add a new image, wordpres create a "<p>" with a width of all the div where the post is.
    I've added some new attributes in my css to float left the images, but still anything happens.
    What can I do?
    Thanks!

    Sorry for my poor english

  2. stvwlf
    Member
    Posted 2 years ago #

    makes sure your theme has .alignright and .alignleft defined in its stylesheet. If not, add these:

    alignright {
      float: right;
      padding: 15px
    }
    alignleft {
      float: left;
      padding: 15px
    }
  3. carleswwwisibility
    Member
    Posted 2 years ago #

    I've tried it and I have yet the same problem.
    I think that all is happenning because it appears a "<p>" after the images.
    Can i do something??

  4. stvwlf
    Member
    Posted 2 years ago #

    it will help if you post a URL of the page you are having trouble with

  5. carleswwwisibility
    Member
    Posted 2 years ago #

  6. stvwlf
    Member
    Posted 2 years ago #

    The reason the text won't float next to the images is because every P tag in your post entries clears the float created by the image above it.
    stylesheet line 1230

    .entry p {
    HERE --> clear:left;
    margin-top:5px;
    padding-left:20px;
    padding-right:20px;
    text-align:left;
    }

    When you clear a float that stops the text flow. When I remove clear: left from that CSS above, the entire text column displays one character wide and half a mile long. I started looking at why that was happening but its a bit involved.

    There are some structural problems with your CSS. It was hacked together to make it work. One of the side effects of the hacking is the problem with the text not wrapping around the image.

    You need to look at your theme and correct the underlying issues. For starters, remove the clear left on the p tags, and replace it with a float: left. That makes the text display the proper width but throws off the spacing further down. Make page elements that are not behaving float: left

    Also, there are a lot of !important 's on some lines. Remove those as they override necessary styling. Those should be used very sparingly. When used to correct one problem they often create another problem.

    I found one place that was setting a top margin on paragraphs to -10px. That also is a hack to correct another problem. When I removed that the layout worked better - it probably should be 10px not -10px.

Topic Closed

This topic has been closed to new replies.

About this Topic