css column to occupy all remaining space

Question

I want the column A to be fixed at 200px and column B to occupy all the remaining space on the right. If i set the width of .column2 to 100%, it will not work.

<!DOCTYPE html>
<html>

<head>
    <style>
        .row {
            width=100%;
        }

        .column {
            float: left;
            width: 200px;
            padding: 10px;
            height: 300px;
        }

        .column2 {
            float: left;
            width: 200px;
            padding: 10px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="column" style="background-color:#aaa;">
            <h2>Column A</h2>
            <p>ROW 1</p>
        </div>
        <div class="column2" style="background-color:#bbb;">
            <h2>Column B</h2>
            <p>ROW 1</p>
        </div>
    </div>
</body>

</html>

score 1 · Accepted Answer · answered Jul 30 '21 at 04:40

Use you can flex to achieve this

<!DOCTYPE html>
<html>

<head>
    <style>
        .row {
            display: flex;
        }

        .column {
            float: left;
            width: 200px;
            padding: 10px;
            height: 300px;
        }

        .column2 {
            flex-grow: 1;
            float: left;
            padding: 10px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="column" style="background-color:#aaa;">
            <h2>Column A</h2>
            <p>ROW 1</p>
        </div>
        <div class="column2" style="background-color:#bbb;">
            <h2>Column B</h2>
            <p>ROW 1</p>
        </div>
    </div>
</body>

</html>

css column to occupy all remaining space

1 Answers1