Home/ Questions/Q 9005941
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T01:16:48+00:00

I am fairly new at this, so, this may seem like a very simple

  • 0

I am fairly new at this, so, this may seem like a very simple question to answer.

I’ve started to design my own page, and the code below is where I am at so far.

How it’s looks is…

  • top left – my logo
  • top right – navigation
  • left hand side – images / descriptions

What I am trying to do, and where I am getting stuck, is getting the description to align perfectly underneath each image, and have that same thing happen as you move right across the page.

What is currently happening is that each image, and description underneath, are aligning on the left all the way down the left side of the page.

Current code below:

<body>
  <div class="container">
    <a href="#"><img src="#" alt="Title" width="300" height="100" /></a>
    <div id="navbar">
      <ul>
        <li><a href="#">GALLERY</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
    <div id="images">
      <img src="#" width="300" height="199" alt="name"></div>
      <div id="descriptions">City</div>
      <div id="images">
        <img src="#" width="300" height="199" alt="name"></div>
        <div id="descriptions">Model</div>
      </div>
  </div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d use markup like this:

    <figure class="images">
    <img src="#" width="300" height="199" alt="City">
    <figcaption>City</figcaption>
</figure>

<figure class="images">
    <img src="#" width="300" height="199" alt="Model">
    <figcaption>Model</figcaption>
</figure>

<figure class="images">
    <img src="#" width="300" height="199" alt="Foo">
    <figcaption>Foo</figcaption>
</figure>

    And some sample CSS:

    .images {
    float: left;
    width: 300px;
    min-height: 200px;
    margin: 0 10px 0 0;
    background-color: #EEE; /* just to show containers since image scr is blank */
}

.images:last-child {
    margin-right: 0;
}

.images figcaption {
    text-align: center;
}

    Fiddle

    • 0