SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Location
    Ljubljana
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div/img to the bottom

    Hello

    I have a simple css sheet with the following structure (image attached):

    Code:
    <div class="main">
    
    <div class="left">
    <img>
    </div>
    
    </div class="right">
    <img>
    <p>some text</p>
    </div>
    
    </div>
    Now I'd like to align the image/left div vertically to the bottom.
    How can I do this?

    vertical-align: bottom; attribute wont work on div or image, I have tried the position: absolute trick, but this messes everything up. How should I solve this?

    Many thanks in advance!
    Attached Images Attached Images

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Normally, the height of the .main div would be determined by the amount of content within. If the .left and .right divs are the last thing within .main and floated left and right, then they should be at the bottom of .main .

    If the above isn't the case, then we need more information, like the page html and css code in full, or preferably a link to the example online.

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Location
    Ljubljana
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Normally, the height of the .main div would be determined by the amount of content within. If the .left and .right divs are the last thing within .main and floated left and right, then they should be at the bottom of .main .

    If the above isn't the case, then we need more information, like the page html and css code in full, or preferably a link to the example online.
    I tried setting float to left and right (of each div) as you said, but it didnt help.

    Here is direct link to the example:

    Link

    Many thanks in advance!

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I note you have tried to apply the image as a background to .topbox - for that to work you need to force .topbox to surround the floats (normally .topbox will collapse to zero height due to the internal floats), and the overflow property can do this. If you intention is to just have the left image displayed at the bottom near the footer, then you don't need the .span-15 div and its image - just display the image as the background to .topbox and positioned at the bottom :
    Code:
    .topbox {
    background: url(img/jajce.jpg)no-repeat left bottom;
    overflow: hidden;
    }

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Location
    Ljubljana
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, this seems to work!

    I tried setting it as a background of topbox but withotu success because I didnt know overflow attribute.

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can define the CSS of left and right about IMG attribute


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
  •