SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    - Michael - Bytecon's Avatar
    Join Date
    Mar 2004
    Location
    Ireland
    Posts
    630
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Fixing float problem without clear or set height

    Hi,

    Looking for a bit of advice, I'm floating products on a search results page - it's a fluid width page so I want the results to move across as the browser is expanded.

    Please have a look at the attached image to see exactly what my problem is. I always stumble upon this issue and usually correct it by either setting a height to the div, or clearing it after a certain number of items. However I'm not able to use either of these methods in this case, is there any alternative?

    Code:
    Code:
    .searchitem{
    	float:left;
    	width:152px;
    	margin:10px 10px 10px 10px;
    }
    Any help appreciated,

    Thanks,
    Michael
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Can you linnk a site to us? Perhaps give overflow:hidden; to that element and the parent of the floats to enclose the floated elements. Is that what you mean?

    Waiting for your image to be approved...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without being able to look at the attached image (which is waiting for approval), I'll throw in an idea

    Code CSS:
    .searchitem{
    	overflow:hidden;
    	float:left;
    	width:152px;
    	margin:10px 10px 10px 10px;
    }

    Edit:

    oops I'm late
    Tweep List adds an avatar menu to Twitter (open source)
    Word Stats shows your most used words on Twitter

  4. #4
    - Michael - Bytecon's Avatar
    Join Date
    Mar 2004
    Location
    Ireland
    Posts
    630
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    overflow:hidden doesn't seem to solve it, i put it on the parent container and the actual floating div. I forgot about the attachment having to be approved - opps, can you see it now?

    M

  5. #5
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See my inline-block gallery demo. The problem arises from some of the float elements being taller than others. The next row of floats bump into the longer element as it slides across the page.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  6. #6
    - Michael - Bytecon's Avatar
    Join Date
    Mar 2004
    Location
    Ireland
    Posts
    630
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gary - thanks, your solution worked perfectly!


Bookmarks

Posting Permissions

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