[resolved] [CSS Problem] Float makes images disappear - Help Needed (8 posts)

  1. siaush
    Posted 9 years ago #


    I'm currently using WordPress 2.0.5 with K2 Beta Two 0.9.1. I have used the following codes in my blog to position images but somehow they make the images disappear into the thin air.

    <div style="float: right;"><img src="sampleimage.jpg" title="Sample Image" /></div>

    I've also tried to assign them in the CSS like this:

    div.right {


    <div class="right"><img src="sampleimage.jpg" title="Sample Image" /></div>

    Neither way worked out, the image just disappeared to no where. I've tested with other K2 schemes including the option 'No Scheme'. However the images appear correctly if I use other themes like the Default Theme and Cutline.

    Can any one please help me about this? I've tried to solve this for a whole day yet I can't find a solution to this issue.

    Thank you very much,

  2. siaush
    Posted 9 years ago #

    Ok here am I again, with some screenshots:

    Problem occurs when using K2 Theme
    Worked fine in Cutline Theme

    The codes used behind the scenes are:

    The CSS File:

    div.right {
    float: right;

    div.picdescript {
    font-size: 80%;
    line-height: 160%;
    text-align: center;
    background-color: #fffde5;
    border-top: 1px solid #f2f0d9;
    border-bottom: 1px solid #e6e4cf;
    padding: 6px;
    margin-top: 2px;

    Codes in Post:

    <div class="right"><img src="TeshimaAoi.jpg" title="Teshima Aoi" /><div class="picdescript">Teshima Aoi</div></div>

    Please, anyone please help me with this. I am dealing it for since morning until now >.< and I still can't find a way to solve this 'mystery'

    Thank you very very much!

  3. Root
    Posted 9 years ago #

    siaush this is slightly more tricky than it looks but we can get you fixed up.

    First up lets keep the CSS separate and not go inline.

    Next - a floated element must have its width defined.

    SO: In the html

    <img src class="right" width="xxpx" height="xxpx" (url to image) >

    In the CSS

    .right {float: right;}

    NB: Note the dot before right.

    NOW: That fix is not the end of it. You need to clear the float with a clearer.

    Get that bit running first then post again and we can fix it.

  4. siaush
    Posted 9 years ago #

    I need the caption to be floated to the right too.. It seems your code only float the image to the right, am I correct?

    EDIT: My original codes worked in IE 6 & 7 and Opera 9, but not in Firefox 2.

    Is that a possible that the styles conflict with K2's CSS? Anyone knows it? because in other themes it just worked.

  5. Root
    Posted 9 years ago #

    Well you only asked for code to float the image. :). I would wrap the image and caption in a new div and float them both together.
    You seem to be making good progress on this. Stick with it. Floats are tricky.

  6. siaush
    Posted 9 years ago #

    Resolved. Some styles seems to be conflicting, I've used style="width:186px;" instead of width="186px" in the div and it worked. Thank you. ^^

  7. lelion
    Posted 9 years ago #


    I've used style="width:186px;" instead of width="186px" in the div and it worked.

    In HTML, width="186" is correct, width="186px" is incorrect. In html EVERY NUMBER is in pixels, so shouldn't be added as in CSS (in css [ width: 186px ] is correct, but [ width: 186 ] is NOT:)

    My $ 0.02 :)

  8. siaush
    Posted 9 years ago #

    Thanks for the correction lelion ^^

Topic Closed

This topic has been closed to new replies.

About this Topic