ThemeShaper Forums » Thematic

[closed]

h3 not wrapping around floated image, simple CSS problem?

(12 posts)
  • Started 2 years ago by elizabethr4
  • Latest reply from elizabethr4
  • This topic is resolved
  1. Hi All,
    This seems like a simple CSS problem, but for the life of me, I can't solve it. I've searched the forums and can't find anything.

    On a static page: http://buunnicoffee.com/testing2/about-us/, the first subhead "About Our Founders: Elias and Sarina" is extending the full width of the #container and the div with class="entry-content". The rest of the text wraps around the image, but for some reason, this heading is being pushed below the image. Further down the page, another image is floated (it's inside the h3 tag) and the heading wraps around the image just fine. (I have a screenshot of firebug but I don't know how to attach?)

    I've played with the following CSS and can't seem to affect this width of the h3:

    .entry-content h3 {
    color: #582700;
    font-size: 15px;
    font-style: normal;
    font-weight: bold;
    line-height: 20px;
    margin: 0 0 8px;
    padding: 0;
    }
    .entry-content {
    padding: 14px 0 0;
    }
    #content {
    margin: 0 0 0 270px;
    overflow: hidden;
    width: 690px;
    }
    .entry-title {
    color: #582700;
    font-family: Georgia,Georgia,"Times New Roman",Times,serif;
    font-size: 19px;
    font-weight: bold;
    line-height: 22px;
    margin: 0;
    width: 660px;
    }

    The reason I included the class "entry-title" is because on the home page, I had to add a width to this to get one of the heads to stay on one line (so maybe it's affecting this?).
    In fact, I would rather NOT have a width on the class "entry-title" but using 100% and other tries didn't work.

    For that matter, I can't seem to change the width of the text - there's a margin on the right side that's a little too wide for me, but I can't see where there is padding or margin or width that is affecting it.

    Is there something with display:block that I should turn off to make this h3 not go below this image?

    Please let me know if there is more code I should post. I'm sure this is something so simple, I just can't see it, so thanks so much for taking a look!

    Posted 2 years ago #
  2. Sorry for all of the posts - I'm having trouble posting this question, so I have to do it in pieces.

    Hi All,
    This seems like a simple CSS problem, but for the life of me, I can't solve it. I've searched the forums and can't find anything.

    On a static page: http://buunnicoffee.com/testing2/about-us/, the first subhead "About Our Founders: Elias and Sarina" is extending the full width of the #container and the div with class="entry-content". The rest of the text wraps around the image, but for some reason, this heading is being pushed below the image. Further down the page, another image is floated (it's inside the h3 tag) and the heading wraps around the image just fine. (I have a screenshot of firebug but I don't know how to attach?)

    Posted 2 years ago #
  3. I'm having trouble posting a new question, I'm so sorry for all of the posts.

    Posted 2 years ago #
  4. I guess I have to do this in pieces, again, apologies:
    Hi All,
    This seems like a simple CSS problem, but for the life of me, I can't solve it. I've searched the forums and can't find anything.

    Posted 2 years ago #
  5. On a static page: http://buunnicoffee.com/testing2/about-us/, the first subhead "About Our Founders: Elias and Sarina" is extending the full width of the #container and the div with class="entry-content". The rest of the text wraps around the image, but for some reason, this heading is being pushed below the image. Further down the page, another image is floated (it's inside the h3 tag) and the heading wraps around the image just fine. (I have a screenshot of firebug but I don't know how to attach?)

    Posted 2 years ago #
  6. On a static page: http://www.buunnicoffee.com/testing2/about-us/

    Posted 2 years ago #
  7. On a static page (I can't seem to post the link), the first subhead "About Our Founders: Elias and Sarina" is extending the full width of the #container and the div with class="entry-content". The rest of the text wraps around the image, but for some reason, this heading is being pushed below the image. Further down the page, another image is floated (it's inside the h3 tag) and the heading wraps around the image just fine. (I have a screenshot of firebug but I don't know how to attach?)

    Posted 2 years ago #
  8. Trying to post the link to the static page: http://buunnicoffee.com/testing2/about-us/

    Posted 2 years ago #
  9. Trying to post the link to the static page (it keeps getting rejected, so here it is with spaces): www. buunnicoffee.com /testing2 / about-us/
    (Take out the space -- I don't know why I'm having a problem, sorry!)

    Posted 2 years ago #
  10. I've played with the following CSS and can't seem to affect this width of the h3:

    .entry-content h3 {
    color: #582700;
    font-size: 15px;
    font-style: normal;
    font-weight: bold;
    line-height: 20px;
    margin: 0 0 8px;
    padding: 0;
    }
    .entry-content {
    padding: 14px 0 0;
    }
    #content {
    margin: 0 0 0 270px;
    overflow: hidden;
    width: 690px;
    }
    .entry-title {
    color: #582700;
    font-family: Georgia,Georgia,"Times New Roman",Times,serif;
    font-size: 19px;
    font-weight: bold;
    line-height: 22px;
    margin: 0;
    width: 660px;
    }

    The reason I included the class "entry-title" is because on the home page, I had to add a width to this to get one of the heads to stay on one line (so maybe it's affecting this?).
    In fact, I would rather NOT have a width on the class "entry-title" but using 100% and other tries didn't work.

    For that matter, I can't seem to change the width of the text - there's a margin on the right side that's a little too wide for me, but I can't see where there is padding or margin or width that is affecting it.

    Is there something with display:block that I should turn off to make this h3 not go below this image?

    Please let me know if there is more code I should post. I'm sure this is something so simple, I just can't see it, so thanks so much for taking a look!

    And so sorry for all of the posts!!! I don't know why the link was making it get rejected from the forum!

    Posted 2 years ago #
  11. the spam fairies sometimes trap posts if they have a lot of links in them. has happened to me a lot in the past.

    headings are block level elements by default, so they wouldn't automatically wrap around a float. you could maybe try display: inline-block though be forewarned that doesn't jive w/ IE7 and older, b/c IE sucks.

    Posted 2 years ago #
  12. Thanks for the tip! I figured it was something to do with the block level part/display:block, but I didn't see it in the CSS.

    I tried display:inline first, and that fixed the image wrap problem, but caused another style problem on a different h3 on the site, so I added "style: display:inline;" just to that h3 (since it's a static About page) and it fixed that instance. It's fine in IE8, I have to see what nightmare presents itself in IE7.

    Thanks also for the note about spam fairies. I was going crazy, trying to post!

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.