experimenting with images

This is to see how text relates to an image when they are in the same div.

by Matthew Day

HTML

<div class="container">
    <img src="https://s3-us-west-2.amazonaws.com/md-ratios/01_beach_original.jpg" />
    <div class="box">Beach Bums</div>
    <div class="text">This is a line of text.</div>
</div>

CSS

/* img {
    margin-left: -150px;
    margin-bottom: -5px;
} */

.container {
    /* position: relative; */
    width: 50%; /* What is interesting here is that the image extends beyond its containing box. You can get around this with overfow hidden, or making width 100% for the image itself. */
    border: 1px solid red;
    /* overflow: hidden; */
}

.box {
    position: relative;
    top: -60px; /* I tried a negative top margin but that actually moves everything up, inlcluding any <div>s below this one. But since you want to keep any boxes below this one below the image itself, use a negative top instead. */
    border: 2px solid white;
}

img {
    /* width: 100%; */
    margin-bottom: -5px;
}