Ignore paddings if past point

HTML & CSS
1

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

You could absolutely position your image. That way it’ll always stay at the bottom.


.my-container {
  width:100px;
  height:100px;
  position:relative;
}

.my-container img {
   position:absolute;
   bottom:0;
}
3

If that div is just for html images it could also be done with line-height and vertical-align.

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

Or something more complicated like this :slight_smile:


<!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>