SitePoint Sponsor

User Tag List

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

    How to get images lined up on the bottom of a page, next to each other, left to right

    Hello,

    We offer a free Blog service, and as part of this free Blog service people can add fotos to their Blogs.

    Recently we switched the method for lining up the user fotos to be CSS based. With the user able to select for a foto added to their Blog to be on right-top or left-top of their Blog or at the bottom of their Blog.

    However I am having problem getting the fotos that are added to the bottom of a Blog to line up appropriately. That is we want the fotos added to the bottom of a Blog to be lined up next to each other, left to right as they are added.

    How do we get this done?

    FYI, we are using this CSS definition now, which is not doing the job right:
    Code CSS:
    .image-bottom {
    	border: 0;
    	clear: bottom;
    	float: bottom;
    	margin-left: 5px;
    	margin-right: 5px;
    	margin-top: 15px;
    	margin-bottom: 15px;
    	}


    You can see an example of what I am referring to here on this user Blog:
    http://www.anoox.com/news/show_selec...?article=38632

    Also when a user adds a foto to be bottom based, then the rounded corner affect at the bottom of the Blog page breaks, as you can see from above example. So how do we correct this issue too?

    Regards,

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Float bottom/clear bottom doesn't exist.

    If you want hte images side by side just don't float it at all . They are inline elements and will naturally sit next to each other.

    If they are wrapped in a block element or something then just give it float:left; instead of float:bottom (float:bottom/clear:bottom don't exist)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

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

    I have done what you suggested, that is remove float & clear bottom, so now its related class is:

    .image-bottom {
    border: 0;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
    }

    However the images in bottom of a Blog still do not seat next to each other!
    Instead they are stacked on top of each other which should not be the normal way they display on the bottom.

    Regards,



    Quote Originally Posted by RyanReese View Post
    Float bottom/clear bottom doesn't exist.

    If you want hte images side by side just don't float it at all . They are inline elements and will naturally sit next to each other.

    If they are wrapped in a block element or something then just give it float:left; instead of float:bottom (float:bottom/clear:bottom don't exist)

    Anoox search engine volunteer

    www.anoox.com

  4. #4
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Havent haed much success with this one..

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The images are wrapped in the div with class image-bottom. Give that div a float left. Ryan already provided you with that fix
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post

    If they are wrapped in a block element or something then just give it float:left; instead of float:bottom (float:bottom/clear:bottom don't exist)
    Quote Originally Posted by WorldNews View Post
    .image-bottom {
    border: 0;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
    }

    However the images in bottom of a Blog still do not seat next to each other!
    Instead they are stacked on top of each other which should not be the normal way they display on the bottom.
    Code:
    .image-bottom{float:left;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey ThanX, that works fine, but there is another problem.

    The fotos at the bottom of Blogs are now lining up correct, however the
    fotos at the bottom of the Blog are outside of the body area of the Blog,
    as you can see here:
    http://www.anoox.com/news/show_selec...?article=38632

    or have broken the rounded corner effect of the bottom of the Blog body.
    Do you know what to do to correct this problem?

    FYI, I have checked and dbl checked and all the Div pairs are correctly
    closed by the Php code that generated this page.

    Regards,

    Quote Originally Posted by RyanReese View Post
    Code:
    .image-bottom{float:left;}

    Anoox search engine volunteer

    www.anoox.com

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi that's because the images are floated and theyare taken out of hte flow. So basically the parent doesn't even know they are there . You need the parent to have a clearing mechanism on it
    Code:
    .blog_text_rounded{overflow:hidden;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It works fine now

    Man where did you get this overflow:hidden; thing?
    I did not know such a thing existed and I still do not know how exactly it is taking care off this problem. Must read up on it.
    Is this part of a new CSS release?

    Anyway, Thanx again. U are the King of CSS

    Quote Originally Posted by RyanReese View Post
    Hi that's because the images are floated and theyare taken out of hte flow. So basically the parent doesn't even know they are there . You need the parent to have a clearing mechanism on it
    Code:
    .blog_text_rounded{overflow:hidden;}

    Anoox search engine volunteer

    www.anoox.com

  10. #10
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WorldNews View Post
    It works fine now

    Man where did you get this overflow:hidden; thing?
    I did not know such a thing existed and I still do not know how exactly it is taking care off this problem. Must read up on it.
    Is this part of a new CSS release?

    Anyway, Thanx again. U are the King of CSS
    As Ryan pointed out, because the containing element doesn't know about the floats, you need a clearing: overflow:hidden is the latest one in clearing elements. The 'old' method, was by using clear:both with an extra html element but now a days, overflow: hidden achieves the same effect without extra mark up.

    You can read about in this this sitepoint article
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by WorldNews View Post
    It works fine now

    Man where did you get this overflow:hidden; thing?
    I did not know such a thing existed and I still do not know how exactly it is taking care off this problem. Must read up on it.
    Is this part of a new CSS release?

    Anyway, Thanx again. U are the King of CSS
    Thanks lol .

    It has a side effect of being a clearing mechanism. Just a little nifty thing
    Quote Originally Posted by Luki_be View Post
    As Ryan pointed out, because the containing element doesn't know about the floats, you need a clearing: overflow:hidden is the latest one in clearing elements. The 'old' method, was by using clear:both with an extra html element but now a days, overflow: hidden achieves the same effect without extra mark up.

    You can read about in this this sitepoint article
    Technically the old way was (before overflow:hidden) was overflow:auto

    Paul O'b invented this. It's nifty and easy to use overflow:hidden, though if you have a design detail that you need hanging out then you should shy away from this and use the clearfix (or the clearing element) instead.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Technically the old way was (before overflow:hidden) was overflow:auto
    I was referring to the old way before the old way
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I knew what you meant I just wnated to clarify . I'd love to know the history, or rather, what claering methods came first.

    As I understand it (sorry to take over your thread!) it was
    Clearing div
    establishing a block context
    overflow
    clearfix
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I knew what you meant I just wnated to clarify . I'd love to know the history, or rather, what claering methods came first.

    As I understand it (sorry to take over your thread!) it was
    Clearing div
    establishing a block context
    overflow
    clearfix
    If i'm not mistaken it's:

    a cleared element, as the W3C suggested (div or the ugly <br style="clear:both"/>)
    Aslett/PIE Method (pseudo class after)) AKA clearfix
    Floating nearly Everything (FnE) method
    overflow:auto that turned into the overflow:hidden
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •