SitePoint Sponsor

User Tag List

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

    How to stack images on top of each other when images are Floating?

    Hello,

    We offer a free Blog service, and one of the features of this free blog service is that you can have your fotos that you have added to your Blog show via the Light Box effect.

    And we use
    <div class="image-float-right">
    to for example float the images on the right side, if the user has chosen to display them on the top right side.

    However if there are more than 1 images being floated right, rather than them stacking on top of each other, they are being placed next to each other which is not what should be.

    For an example, take a look at this user Blog:
    http://www.anoox.com/news/show_selec...?article=38632

    As you can see the images rather than being stacked on top of each other, are seating to next each other. Now you can imagine how bad it will be if there are 5 such images.

    So using the
    <div class="image-float-right">
    how do we get them to stack up right on top of each other?

    Regards,

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Do you mean actually on top of one another so only the top most one displays or do you mean down the right side of the screen?

    For the first of these you'd need to use position:absolute

    For the second the easiest way is probably to place the images inside a container and float that right instead of the individual images.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You could have that calss add a "clear:right" .

    Untested though.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Yes, I mean the 2nd one. That is have the fotos all aligned on top of each
    other down the right side. Of course the user can have the option of
    having them go across, as they like. But for this discussions purpose
    I am looking for the solution to have the fotos aligned down the right side.

    So how doese one "place the images inside a container"?
    I mean is that a CSS thing? or what?


    Quote Originally Posted by felgall View Post
    Do you mean actually on top of one another so only the top most one displays or do you mean down the right side of the screen?

    For the first of these you'd need to use position:absolute

    For the second the easiest way is probably to place the images inside a container and float that right instead of the individual images.

    Anoox search engine volunteer

    www.anoox.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You already have a class set up in style_blog.css to float the images and you could just add clear:right to it.

    e.g.

    Code:
    .image-float-right  {
    border:2px solid  #000000;
    clear:right;
    float:right;
    margin:5px 2px 10px 15px;
    
    
    }
    Or set up a similar new class if its just for that section only.

  6. #6
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    It is amazing, it is now working OK.
    I mean I had the clear:right; in there but it was below float:right;
    and it was not working Ok, once I moved it above it is working OK!
    Did not know that it was this sensitive!!!

    cheers,

    Quote Originally Posted by Paul O'B View Post
    Hi,

    You already have a class set up in style_blog.css to float the images and you could just add clear:right to it.

    e.g.

    Code:
    .image-float-right  {
    border:2px solid  #000000;
    clear:right;
    float:right;
    margin:5px 2px 10px 15px;
    
    
    }
    Or set up a similar new class if its just for that section only.

    Anoox search engine volunteer

    www.anoox.com

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    No it doesn't
    Code:
    <!doctype html>
    <html>
    <head>
    <title>asdf
    </title>
    <style>
    div{
    background:red;
    clear:right;
    float:right;/*switch these up*/
    height:40px;
    width:40px;
    margin:6px;
    }
    </style>
    </head>
    <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </body>
    </html>
    Order of properties doesn't matter (most of the time, anyways)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •