Article Categories

Selected Reading

How to prevent inline-block divs from wrapping?

CSS Web Development Front End Technology

The CSS white-space property can be used to prevent inline-block elements from wrapping to the next line. When you set display: inline-block on elements, they normally wrap when there's insufficient horizontal space. Using white-space: nowrap on the parent container forces all inline-block children to stay on the same line.

Syntax

.parent-container {
    white-space: nowrap;
}

.child-element {
    display: inline-block;
}

Example 1: Basic Inline-Block Divs

In this example, we create three inline-block divs that won't wrap even when the browser window is resized

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        white-space: nowrap;
        background-color: #f0f0f0;
        padding: 20px;
    }
    
    .inline-block-div {
        display: inline-block;
        width: 200px;
        height: 100px;
        background-color: #4CAF50;
        color: white;
        text-align: center;
        line-height: 100px;
        margin: 10px;
        border-radius: 8px;
    }
</style>
</head>
<body>
    <h3>Preventing inline-block divs from wrapping</h3>
    <div class="container">
        <div class="inline-block-div">Div 1</div>
        <div class="inline-block-div">Div 2</div>
        <div class="inline-block-div">Div 3</div>
    </div>
</body>
</html>

Three green rectangular boxes with white text appear horizontally in a row. Even when the browser window is narrowed, they stay on the same line and may extend beyond the viewport width.

Example 2: Inline-Block Tables

This example demonstrates preventing two tables from wrapping by keeping them side by side

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        white-space: nowrap;
        padding: 20px;
    }
    
    .table {
        display: inline-block;
        vertical-align: top;
        margin: 10px;
    }
    
    table {
        border-collapse: collapse;
    }
    
    th, td {
        padding: 12px 20px;
        border: 1px solid #ddd;
        text-align: center;
    }
    
    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }
</style>
</head>
<body>
    <h3>Side-by-side tables without wrapping</h3>
    <div class="container">
        <table class="table">
            <tr><th>School Name</th><th>Students</th></tr>
            <tr><td>ABC School</td><td>120</td></tr>
            <tr><td>XYZ Academy</td><td>95</td></tr>
        </table>
        
        <table class="table">
            <tr><th>Product</th><th>Brand</th><th>Price</th></tr>
            <tr><td>AC</td><td>LG</td><td>$800</td></tr>
            <tr><td>Refrigerator</td><td>Samsung</td><td>$600</td></tr>
        </table>
    </div>
</body>
</html>

Two tables appear side by side - one showing school data and another showing product information. Both tables maintain their horizontal alignment regardless of window size.

Key Points

Parent container Apply white-space: nowrap to the parent element
Child elements Set display: inline-block on child elements
Horizontal scrolling Content may extend beyond viewport width
Vertical alignment Use vertical-align: top for consistent alignment

Conclusion

Using white-space: nowrap effectively prevents inline-block elements from wrapping. However, consider the impact on responsive design as this may cause horizontal scrolling on smaller screens.

Mohit Panchasara

Updated on: 2026-03-15T17:39:08+05:30

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next