SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How does one float images next to each other using CSS code

    Hello,

    I want to float images uploaded by members next to each other, from left to right.
    And when there is no more room then the code should auto line them in the next
    line so as not to break the browsers..

    You can see a sample of what I mean here:
    http://www.anoox.com/news/profile_view.php?user=2466798

    as you see the fotos are getting loaded on top of each other rather than next to each other.

    And FYI, here is the CSS code we are currently using for aligning these images:

    .image-float-left {
    clear:left;
    float: left;
    margin-right: 15px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 5px; /* These margin defintions ensure that the Text does not seat too close to image */
    border: 1px solid black;
    padding: 3px;
    }


    What do you suggest to correct this?

    Regards,

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take out "clear:left;".

    .image-float-left {
    /*clear:left;*/
    float: left;
    margin-right: 15px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 5px; /* These margin defintions ensure that the Text does not seat too close to image */
    border: 1px solid black;
    padding: 3px;
    }

    You can also take out "float: left;" as it is being inherited by its parent.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yes, clear: left is causing the problem, because it means "don't let anything sit to the left of me!" But of course, you do want things to sit to the left of the images ... namely, the previous images.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You can also take out "float: left;" as it is being inherited by its parent.
    Just anote that the float property does not cascade That is, floating a parent does not give a child float.

    ==

  5. #5
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey ThanX.
    This took care off the problem.

    But frankly cannot believe I am still having such problem with certain elements of CSS
    I mean this clear:left; stuff just makes no intuitive sense to me!


    Quote Originally Posted by Pamela1991 View Post
    Take out "clear:left;".
    .image-float-left {
    /*clear:left;*/
    float: left;
    margin-right: 15px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 5px; /* These margin defintions ensure that the Text does not seat too close to image */
    border: 1px solid black;
    padding: 3px;
    }

    You can also take out "float: left;" as it is being inherited by its parent.

    Anoox search engine volunteer

    www.anoox.com

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by WorldNews View Post
    clear:left; stuff just makes no intuitive sense to me!
    Why not? You've seen its exact purpose in practice now. Sometimes you may want to float something but not have anything else sitting to its left. That makes clear: left very handy. It can help keep things just where you want them.

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, clear: left is causing the problem, because it means "don't let anything sit to the left of me!" But of course, you do want things to sit to the left of the images ... namely, the previous images.
    Thanks for explaining, Ralph. This is why I use to get points deducted in math class sometimes (for not showing my work ). Frankly, I'm still nowhere near well-versed enough in CSS to explain things... as you can see below...

    Quote Originally Posted by dresden_phoenix View Post
    Just anote that the float property does not cascade That is, floating a parent does not give a child float.

    ==
    Thanks for clearing that up, Ray. When I inspected the element in question, I noticed that "float: left;" was being ignored. I wrongly assumed it had to have been from a parent, but it turns out I was wrong. What was causing that float to be ignored?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Pamela1991 View Post
    When I inspected the element in question, I noticed that "float: left;" was being ignored. I wrongly assumed it had to have been from a parent, but it turns out I was wrong. What was causing that float to be ignored?
    the float:left was crossed out in the inspector because an inline style was providing the float:left and therefore had higher specificity.

    Code:
    <div class="image-float-left" style="float: left;">
    Code:
    element.style {
        float: left;
    }
    .image-float-left {
        border: 1px solid black;
        float: left;

  9. #9
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    the float:left was crossed out in the inspector because an inline style was providing the float:left and therefore had higher specificity.

    Code:
    <div class="image-float-left" style="float: left;">
    Code:
    element.style {
        float: left;
    }
    .image-float-left {
        border: 1px solid black;
        float: left;
    Oh, that makes sense now . Thanks for clearing that up for me, Paul.


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
  •