The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How can I display h2 text below each gallery image?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #32206

    I have set up a gallery page as:

    div id image_container
    div id image_1 class the box

    So here is the css of my gallery page



    .the_box {
    float: left;
    height: 251px;
    width: 251px;
    overflow: hidden;
    position: relative;
    margin: 0 29px 29px 0;

    .the_box h2 {
    font-size: 10px;

    .the_box a {
    display: block;
    position: relative;

    .the_box a img {
    height: 251px;
    width: 251px;
    position: absolute;
    top: 0;
    left: 0;

    #image_container {
    width: 811px;
    margin: 20px 0px 20px;
    padding: 0;
    float: left;
    list-style: none;

    ul#image li a {
    height: 248px;
    width: 248px;
    float: left;

    #image_30 {
    margin: 0;

    Unfortunately, the h2 text is blocked off by each image. How do I get it to fit underneath each image? Any tips would be greatly appreciated!


    It would probably be easier to help if you had an example online. It looks like you may have some float issues though, so try pasting this above each


    If that works, then I would get rid of the inline style and make a .clear class. :)


    put the image and the h2 in the same div.

    make the image display:block and be on top of the h2.

    set the h2 width to be the same width as the containing div or the image.

    center or left (or right if that floats your boat) align the h2.



    Hey guys thanks for the help!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.