Results 1 to 5 of 5

Hybrid View

  1. #1
    Join Date
    Mar 2004
    Location
    Calgary, Alberta
    Posts
    290
    Plugin Contributions
    1

    Default category image - weird float behavior

    I have a weird problem when I do the following: (example: http://www.totalgarage.ca/products/i...index&cPath=29 )

    img.floatLeft {
    float: left;
    clear: left;
    margin: 4px;
    }

    I do this for the the category description to display an image in the Left Hand Corner. But when I do this the images for the sub-categories also shift over. How do I stop that from happening? I know it has to be simple....

    Thanks in advance.

  2. #2
    Join Date
    Oct 2007
    Posts
    289
    Plugin Contributions
    0

    Default Re: category image - weird float behavior

    Floats have to be cleared ofcourse.

    Add this to the DIV which contains the image you're floating:

    overflow:hidden; width:100%;
    [FONT=Microsoft Sans Serif]CSS Evangelist[/FONT]

  3. #3
    Join Date
    Oct 2007
    Posts
    289
    Plugin Contributions
    0

    Default Re: category image - weird float behavior

    Well, just add this to your CSS and all should be fine:

    #categoryDescription {
    overflow:hidden;
    width:100%;
    }
    [FONT=Microsoft Sans Serif]CSS Evangelist[/FONT]

  4. #4
    Join Date
    Mar 2004
    Location
    Calgary, Alberta
    Posts
    290
    Plugin Contributions
    1

    Default Re: category image - weird float behavior

    Beautiful, worked fantasticly, the odds of me stumbling upon that is almost nil.

    So what does this do?
    overflow:hidden;
    width:100%;

    the width 100% I am assuming says take the entire containment space I'm entitled to. but te overflow is interesting.

  5. #5
    Join Date
    Oct 2007
    Posts
    289
    Plugin Contributions
    0

    Default Re: category image - weird float behavior

    It clears floating objects in a container, without requising any markup.

    overflow:hidden; does the trick, width is just an IE hack.
    [FONT=Microsoft Sans Serif]CSS Evangelist[/FONT]

 

 

Similar Threads

  1. Weird Behavior Upgrading
    By ideasgirl in forum Upgrading from 1.3.x to 1.3.9
    Replies: 8
    Last Post: 8 Oct 2010, 04:01 AM
  2. Weird behavior of sidebox
    By antoniobb in forum General Questions
    Replies: 5
    Last Post: 10 Aug 2010, 10:04 AM
  3. Float Category Image
    By mrtechnique in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 10 Oct 2008, 10:24 PM
  4. Ok.... this is weird IE behavior
    By crabdance in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 11 Nov 2007, 02:59 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg