Home/ Questions/Q 8538511
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T11:08:07+00:00

I’m trying to create a layout with a fixed width div centered between two

  • 0

I’m trying to create a layout with a fixed width div centered between two fluid divs. The configuration should fit within a Bootstrap row. How would I do this?

Here’s an illustration:

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could make this easily with tables, but here is a div version for you:

    <!DOCTYPE>
<html>
    <head>
        <style>
            .d1 {
                background-color: #AAAAFF;
                vertical-align: top;
                margin-right: -75px;
                display: inline-block;
                width: 50%;
                position: relative;
                z-index: 0;
            }

            .d1 .cnt {
                padding-right: 75px;
            }

            .d2 {
                background-color: #AAFFAA;
                vertical-align: top;
                width: 150px;
                display: inline-block;
                position: relative;
                z-index: 2;
            }

            .d3 {
                background-color: #FFAAAA;
                vertical-align: top;
                margin-left: -75px;
                display: inline-block;
                width: 50%;
                position: relative;
                z-index: 1;
            }

            .d3 .cnt {
                padding-left: 75px;
            }
        </style>
    </head>
    <body>
        <div class="d1"><div class="cnt">I'm trying to create a layout with a fixed width div centered between two fluid divs. The configuration should fit within a Bootstrap row. How would I do this? Here's an illustration:</div></div><div class="d2">I'm trying to create a layout with a fixed width div centered between two fluid divs. The configuration should fit within a Bootstrap row. How would I do this? Here's an illustration:</div><div class="d3"><div class="cnt">I'm trying to create a layout with a fixed width div centered between two fluid divs. The configuration should fit within a Bootstrap row. How would I do this? Here's an illustration:</div></div>
    </body>
</html>

    As the divs are inline-block, don’t add space or new line between them.

    • 0