SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast Fender963's Avatar
    Join Date
    Dec 2003
    Location
    Texas
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ignore paddings if past point

    I'm trying to get the effect of a maximum padding. In other words

    <div style="height: 100px; padding-top: 100px">
    <img height="variable" />
    </div>

    if variable is 50, the actual padding that will be applied is 50. If variable is 25, padding will be 75.

    Basically I want to force all items down to the bottom of the element.

    Any thoughts?

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You could absolutely position your image. That way it'll always stay at the bottom.

    Code:
    .my-container {
      width:100px;
      height:100px;
      position:relative;
    }
    
    .my-container img {
       position:absolute;
       bottom:0;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    If that div is just for html images it could also be done with line-height and vertical-align.

    Code:
    div {
        height:100px;
        line-height:100px;
    }
    div img{
        vertical-align:bottom;
    }
    However if there was text in there it would need it's line-height reset via the p styles and it would still push down on the image.

    If you have more than just an image in there something would need to be removed from the flow. Either the image or the text.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Or something more complicated like this

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Vertical-align an element of unknown height</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    .outer {
        position:relative;
        display:table;
        height: 510px;
        width: 200px;
        vertical-align: middle; 
        text-align: center;
        border: 1px solid #CCCCCC;
        background:red;
        float:left
    }
    .inner {
        width:100&#37;;
        display:table-cell;
        vertical-align:bottom;
        position:relative;
    }
    p.img1{height:100px;background:#ffffcc}
    p.img2{height:200px;background:yellow}
    p.img3{height:300px;background:green}
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
    .inner {top:100%;left:0;}
    .inner p{top:-100%;    position:relative;}
    </style>
    <![endif]-->
    </head>
    <body>
    
    <div class="outer">
        <div class="inner">
            <p class="img1">this would be an image</p>
        </div>
    </div>
    <div class="outer">
        <div class="inner">
            <p class="img2">this would be an image</p>
        </div>
    </div><div class="outer">
        <div class="inner">
            <p class="img3">this would be an image</p>
        </div>
    </div>
    </body>
    </html>


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
  •