Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How can I stock two arrow images (upvote/ downvote) on top of each other using CSS?

CSS Web Development Front End Technology

The CSS display, float, and clear properties allow you to stack arrow images (upvote/downvote) on top of each other vertically. This is commonly used in voting systems or navigation interfaces where arrows need to be positioned one above the other.

Syntax

.container {
    display: block;
    float: left;
    clear: left;
}

.container img {
    display: block;
    float: none;
    clear: both;
}

Example: Basic Arrow Images

First, let's see how to add arrow images in an HTML page 

<!DOCTYPE html>
<html>
<head>
    <title>Adding Arrow Images</title>
    <style>
        img {
            width: 50px;
            height: 50px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <img src="https://cdn-icons-png.flaticon.com/512/16/16287.png" alt="up arrow">
    <img src="https://cdn-icons-png.flaticon.com/512/608/608258.png" alt="down arrow">
</body>
</html>

Two arrow images (upvote and downvote) appear side by side horizontally on the page.

Example: Stacking Arrows Vertically

The following example shows how to stack two arrow images on top of each other using CSS properties 

<!DOCTYPE html>
<html>
<head>
    <title>Stacked Arrow Images</title>
    <style>
        h1 {
            color: green;
            text-decoration: underline;
        }
        
        .voting-container {
            float: left;
            clear: left;
            margin: 20px;
        }
        
        .voting-container img {
            display: block;
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Stacked Voting Arrows</h1>
    <div class="voting-container">
        <img src="https://cdn-icons-png.flaticon.com/512/16/16287.png" alt="upvote">
        <img src="https://cdn-icons-png.flaticon.com/512/608/608258.png" alt="downvote">
    </div>
</body>
</html>

Two arrow images appear stacked vertically - the upvote arrow on top and the downvote arrow below it, with proper spacing between them.

Key Properties Used

Property Value Purpose
display block Makes images stack vertically instead of inline
float left Positions the container to the left side
clear both Prevents other elements from wrapping around

Alternative Method: Using Flexbox

A modern approach using flexbox for better control and responsiveness 

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Stacked Arrows</title>
    <style>
        .flex-voting {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: fit-content;
            margin: 20px;
        }
        
        .flex-voting img {
            width: 50px;
            height: 50px;
            margin: 5px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .flex-voting img:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="flex-voting">
        <img src="https://cdn-icons-png.flaticon.com/512/16/16287.png" alt="upvote">
        <img src="https://cdn-icons-png.flaticon.com/512/608/608258.png" alt="downvote">
    </div>
</body>
</html>

Two arrow images stacked vertically with a hover effect that slightly enlarges them when the cursor hovers over them.

Conclusion

You can stack arrow images vertically using either the traditional float and clear properties or the modern flexbox approach. Flexbox provides better control and is recommended for responsive designs.

Updated on: 2026-03-15T15:51:55+05:30

295 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements