How to match image width and navigation width on a WordPress photoblog!?!? (2 posts)

  1. cowlishaw
    Posted 5 years ago #

    Hey folks, this should be fairly simple and straightforward but I cannot (for the life of me) find any posts on this simple howto that I need to finish asap! lol I want to edit the CSS of my template so that the navigation menu will always match the exact width of the image. Sometimes the images will be different sizes though but I want the navigation menu and container to change with the image width. There has to be a simple image width tag somewhere that I can use to accomplish this. Please help me, anybody! :) Thanks!

  2. Peter Hardy-vanDoorn
    Posted 5 years ago #

    You need to have the navigation and image inside the same container div. The container div then needs to have its width and height set to auto, overflow to hidden and display to inline-block.

    Like this:

    .container { height: auto; width: auto; overflow: hidden; display: inline-block; }
    .prev { width: 50px; float: left; }
    .next {width: 50px; float: right; }
    <div class="container">
      <div class="image">
        <img name="test" src="" width="400" height="200" alt="" style="background-color: #99FF33" />
      <div class="prev">PREV</div>
      <div class="next">NEXT</div>

    Hope that helps


Topic Closed

This topic has been closed to new replies.

About this Topic