Achieving the perfect horizontal alignment of images

Currently working on a new project and here's the page I'm focusing on:

The elements are exceeding the set height of their container and overlapping into the content area instead of pushing the existing content down. Any suggestions to fix this issue would be greatly appreciated!

Realized there was an error in my code, here is the corrected version:

CSS:

.steps {
   width: 500px;
   height: 70px;
   display: block;
   padding: 10px;
}

HTML:

<div class="steps">
  <a href="http://www.advantagegrandcanyon.com"><img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/BackButton.png"></a>
  <img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/Step1.png">
  <a href="http://www.artificialmarketingsolutions.com/step-2-choose-your-trip-duration"><img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/NEXT.png"></a>
</div>  

Description below the images:

<a href="http://artificialmarketingsolutions.com/grand-canyon-routes/full-grand-canyon/"><img class="imgs alignnone size-full wp-image-27" alt="FullGrand" src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/FullGrand.jpg" width="274" height="204" /></a>
<strong>Full Grand Canyon Trip Features:​</strong>
<ul>
    <li>Longest Route Option​</li>
    <li>Up to 187, 225 or 279 River Miles​</li>
    <li>Motorized Trips from 6-10 Days</li>
    <li>​Non Motorized Trips  from 10-18 Days</li>
    <li>No Mandatory Hiking In or Out</li>
    <li>Over 104 Rapids</li>
    <li>All Raft Types Available​</li>
</ul>
Full canyon river trips begin at Lees Ferry, river mile zero, and continue downstream to one of the "take out" or departure points.  These take-out points are as follows: The Whitmore Helipad at river mile 187, the Diamond Creek Road at river mile 225, a take-out via jetboat ride across Lake Mead beginning just below Separation Canyon at river mile 240 or Pearce Ferry river mile 279.


</div>
<div id="middle">

<a href="http://artificialmarketingsolutions.com/grand-canyon-routes/upper-grand-canyon/"><img class="imgs alignnone size-full wp-image-29" alt="UpperGrand" src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/UpperGrand.jpg" width="274" height="204" /></a>

<strong>Upper Canyon Trip Features:​</strong>
<ul>
    <li>Shortest Route Option​</li>
    <li>89 River Miles</li>
    <li>Motorized Trips 3-5 Days</li>
    <li>Non Motorized Trips 5-8 Days​</li>
    <li>Must Hike out 7.5-10 miles</li>
    <li>Over 41 Rapids</li>
    <li>All Raft Types Available</li>
</ul>
Running from Lees Ferry to Phantom Ranch in the heart of the Grand Canyon, the upper portion is 89 miles long. Upon leaving Lees Ferry, you will quickly enter Marble Canyon. Within a few miles, the first signs of the fascinating geology of the canyon begin to appear as the Kaibab and Toroweap formations make their appearance, followed by Coconino Sandstone​.


</div>
<div id="right-side">

<a href="http://artificialmarketingsolutions.com/grand-canyon-routes/lower-grand-canyon/"><img class="imgs alignnone size-full wp-image-28" alt="LowerGrand" src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/LowerGrand.jpg" width="274" height="204" /></a>
<strong>Lower Canyon Trip Features:​</strong>
<ul>
    <li>Multiple Trip Length Options​</li>
    <li>​98, 136 or 190 River Miles</li>
    <li>Motorized Trips 5-6 Days​</li>
    <li>Non Motorized Trips 7-10 Days</li>
    <li>Must Hike in 7.5-10 miles</li>
    <li>Over 60 Rapids</li>
    <li>All Raft Types Available</li>
</ul>
Your trip will begin at the South Rim of the Grand Canyon.  All passengers going on lower canyon trips spend part of day 1 hiking down Bright Angel Trail to Phantom Ranch (approx. 10 Miles) or to Pipe Creek Beach (approx. 7.5 Miles) depending on the outfitter’s exact meeting point. ​


</div>

<div id="info-container" style="width:100%; height: 100%; display: inline-block;">
<div id="left-info">
  <a href="http://artificialmarketingsolutions.com/grand-canyon-routes/full-grand-canyon/">More Info</a>
  </div>
<div id="middle-info">
  <a href="http://artificialmarketingsolutions.com/grand-canyon-routes/upper-grand-canyon/">More Info</a>
  </div>
<div id="right-info">
  <a href="http://artificialmarketingsolutions.com/grand-canyon-routes/lower-grand-canyon/">More Info</a>
  </div>
</div>

Answer №1

Your code:

<div class="steps">
  <a href="http://www.advantagegrandcanyon.com"><img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/BackButton.png"></a><br />
  <img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/Step1.png"><br />
  <a href="http://www.artificialmarketingsolutions.com/step-2-choose-your-trip-duration"><img src="http://artificialmarketingsolutions.com/wp-content/uploads/2013/05/NEXT.png"></a>
</div>

Simply removing the <br /> tags will prevent the arrows from appearing on a new line. I have commented them out in the code above for clarity.

To position the arrows at either side, you can use CSS floating:

CSS

.steps a{
    float:right;
}
.steps a:first-child{
    float:left;
}

Answer №2

Resolution:

.progress-bars {
   width: 600px;
   height: 80px;
   clear:both !important;
   display: block;
   padding: 15px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The margin-left attribute in HTML does not seem to be functioning properly

When I am working on a .php file, I dynamically generate HTML content (like a template) for each result returned from the search input: while ($row = mysqli_fetch_array($result)) { //image echo "<img id=" . '"' . "myImg" . '"' ...

The issue of JQuery mobile customizing horizontal radio buttons failing to function on physical devices has been identified

Not long ago, I posed a query on Stackoverflow regarding the customization of horizontal jQuery-mobile radio buttons. You can find the original post by following this link How to customize horizontal jQuery-mobile radio buttons. A developer promptly respon ...

HR | extends all the way down the table, creating a vertical boundary

I am currently working on developing an Email Signature Generator. My goal is to extend the blue line (visible in the program) all the way down without affecting the layout of other elements. I suspect that because everything is contained within a table, a ...

Local cross-origin requestsORCross-origin requests within local

I'm having an issue with a simple setup that I can't seem to figure out: This is my index.html file: <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>SyriLab</title> <link rel="stylesheet" ...

Angular: Customizing table cell color based on condition

I am having trouble with changing the cell color of an object in my html table if a certain variable changeColor is true. I am utilizing angular for this task. <tr ng-repeat="list in results"> <% if (!{{list.changeColor}} ) %> <% { ...

Enhance ngx-bootstrap's tab content with ngx-scrollbar functionality

Currently in my project, I am utilizing bootstrap 4 and ngx-bootstrap. One requirement I have is to develop a component consisting of 2 scrollable divs that can be switched by tabs. I was hoping to demonstrate a sample application on stackblitz, but unfor ...

Use flex-grow and flex-wrap to split elements onto separate lines

My parent div, ".tags", contains both links and a title. The parent div is styled with "display: flex;" and "flex-wrap: wrap;". I want the link elements to move onto a new line when they wrap, without being pushed to the right of the screen by the title. ...

Showcasing pictures with a prominent large image accompanied by two smaller ones on the right side

In my use of Material-ui-next, I am attempting to create images in a specific layout. ------ --------- | | | | 2 | | | | 1 |---| | | | | 3 | ------ --------- I have encountered some unusual issues. 1 - 3 appears below 1 ...

How can I use jQuery to automatically redirect to a different HTML page after updating a dynamic label?

When I click on a button in first.html, a function is called to update labels in second.html. However, despite being able to see second.html, I am unable to see the updated values in the labels. Can someone please advise me on how to achieve this? functi ...

What is the best way to resize an image within an SVG shape to completely fill the boundaries?

There is an SVG shape in the form of a parallelogram that has been filled with an image. To view the demo, click here. The code for the SVG object is as follows: <svg style="overflow:visible; margin-left:111px; margin-top:22px; " height="86" width=" ...

How to Preserve Image Aspect Ratio within a Div Using the 'Overflow: Hidden' CSS Property

I am in the process of creating a profile page that takes inspiration from Facebook's layout design, particularly focusing on the banner and profile image combination. While my implementation looks good on desktop screens, I am facing challenges when ...

Looking for ways to incorporate both external and internal styling using jQuery and CSS in my template?

I've been working on a django project for a while now, and I'm facing some challenges with getting external and internal CSS to work. Only inline CSS seems to be functioning properly. I have two questions: How can I get external or internal C ...

What is the best way to incorporate CSS from node_modules into Vite for production?

I have a TypeScript web application where I need to include CSS files from NPM dependencies in index.html. Here is an example of how it is done: <link rel="stylesheet" type="text/css" href="./node_modules/notyf/notyf.min.css&quo ...

Animation using CSS keyframes for simultaneous manipulation of various properties

I am facing a challenge with animating both the bottom and left properties of an object inside a container div simultaneously. How can I make it move diagonally? Despite using keyframes, the following code does not seem to achieve this effect: #containe ...

Angular4: The Process of Iterating Through an Array of Objects within an Object

I'm struggling to iterate through an Object that contains an array of objects within an anchor tag. Here's how my code is structured: {"1":{"uri":"test1","name":"test1","icon":"http:\/\/dummyurl\/images\/icons\/test1-ico ...

Splitting a td tag into multiple columns dynamically with Angular

I am attempting to dynamically split the table element into separate columns. My desired layout should resemble this: https://i.sstatic.net/C81tg.png The values for name and surname are fixed at 1, but the values for subjects and grades can vary (there ma ...

The animation in my SVG comes to a halt at a certain point

I am having an issue with my SVG element (shown below) where it stops animating after a certain period of time. I want the animation to continue indefinitely like in this jsfiddle. .path { stroke-dasharray: 20; animation: dash 10s linear; } @ ...

Creating subpages using IDs can be accomplished by following these simple steps

Currently, I am in the process of developing a website that contains a plethora of information, specifically news articles. Each news article on my site features an introduction and a header. Upon clicking on a particular news article, the full content is ...

rearranging the positioning of links in the HTML navbar

Is there a way to prevent other links in the navbar from moving up slightly when hovering over one link and creating a line (border bottom)? ` .n24{ margin-top: 2px; padding: 14px 14px; } .n25{ margin-top: 2px; padding: 14px 14px; } . ...

concealing elements using negative margins on tablet devices

I have an animated element on the ipad, moving from -200px to 1500px and being hidden due to overflow-x:hidden in the browser. However, when viewing this on the ipad, I am able to scroll "off screen" and reveal the hidden items, despite setting the body a ...