Images (inside divs) stacking instead of being inline

Question

I'm trying to place a series of images on my website, and I want them to flow side by side and automatically wrap to the width of the container div. I made a separate div for each image, because I also need text to stay with each image. However, my image divs are stacking (as if there were a hard return between each one, though there isn't), rather than flowing.

I've been searching for the answer, and everything I've read says that the default positioning for a div is static, which means flow will be automatic. But... it's not seeming to work.

Here's my HTML:

<div id="contentArea">

<div id="frame2">
<div id="f2title">
<u>Everything Changed</u>
  <br> <i>A reflection on life's contingencies.</i>
  </div>
  </div>

<a href="foreveramen.html"><div id="frame1">
<div id="f1title">
<u>Forever Amen</u>
  <br> <i>A wedding song, written for my brother and his wife.</i>
  </div>
  </div></a>

<a href="friendswithyou.html"><div id="frame3">
<div id="f3title">
<u>Friends With You</u>
  <br> <i>Warm, caring friendships often happen without trying.</i>
  </div>
  </div></a>

And here's my CSS:

#contentArea {
    margin-top: 5px;
    margin-left: 45px;
    margin-right; 45px;
    overflow: auto;
    width: 540px;
    height: 590px;
    position: relative;
    background: rgba(255, 255, 255, 0.3);
    font-family:Cambria, "Avenir Black", Futura, "Gill Sans", sans-serif;
    font-size: 0.8em;
}
#frame1 {
    background-image:url(images/frame1thumb.png);
    width:250px;
    height:217px;
}
#f1title {
    width:140px;
    height:188px;
    margin-left:55px;
    margin-right:auto;
    margin-top:70px;
    font-size:14px;
    text-align:center;
    overflow:auto;
    position:absolute;
}

(And so on for the other frames. There's styling for frame 2, 3, and so on, and the only thing that changes is the width and positioning of the text inside the frame.)

I tried typing position:static; into my CSS, under the #frame1 and it doesn't affect anything. Thanks!

Answer 1

I would first rethink your structure a bit. Here's how I would do it. You can use the link element itself for the thumbnail wrapper - and I would suggest you define the importance of the headings etc with heading tags. Search engines read sites like newspapers. If you don't declare importance, they wont know how to structure your site. I wouldn't use underline tag or italic tag because they are deprecated and I wouldn't use br linebreak because it's unnecessary and it's not really a line break. You can declare that in your .css file.

jsfiddle HERE

The magic is basically the float: left; but this will set you up with a more solid foundation. You see, for example - if you decided that you didn't want italics anymore - you would have to go remove all of those tags from the html. This way you only declare it in one place. Further more, styles that all of the blocks share need not be repeated. All blocks are the same I'm imagining. Mabybe they have different background-images.. but the rest is the same. Think modular.

HTML

<section class="content">

    <a class="link-wrapper one"
        alt="song thumbnail"
        href="#">
            <h2>Song Title</h2>
            <h3>Tag line etc I'm guessing</h3>
    </a>

    <a class="link-wrapper two"
        alt="song thumbnail"
        href="#">
            <h2>Song Title</h2>
            <h3>Tag line etc I'm guessing</h3>
    </a>

</section>

CSS

/* moves padding inside the box -
   start your project off right */
* { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
} 

html, body {
    margin: 0;
    padding: 0;
}

.content {
    padding: 1em;
}

.link-wrapper {
    position: relative;
    display: block;
    float: left;
    width:250px;
    height:217px;
    text-align: center;
    margin-right: 1em;
    text-decoration: none;
}

.link-wrapper h2 { /* heiarchy of text importance is how SEO works */
    font-weight: normal;
    text-decoration: underline;
    padding-top: 1em;

}

.link-wrapper h3 { /* heiarchy of text importance is how SEO works */
    font-weight: normal;
    font-style: italic;
}


/* to differentiate + unique classes for thumbnails */

.one {
    background-image:url(http://placehold.it/250x217/ff0066);
}

.two {
    background-image:url(http://placehold.it/250x217/99edee);
}

I hope this helps. -nouveau

Answer 2

Okay, well first of all, here is a link to a working fiddle: jsfiddle

What you need to do is, to give every element, you want to float a float: left;

I would also give every #frame a position: relative; so that the #title's can position themselves according to their parent element.

As @Antony also pointed out, you made a syntax error with margin-right; 45px;, the first semicolon should be a regular colon!