Home/ Questions/Q 6255025
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T14:17:18+00:00

I have a layout defined through CSS that has three columns. It displays correctly

  • 0

I have a layout defined through CSS that has three columns. It displays correctly through Chrome, but in Firefox, the third (right) column wraps around to the bottom. Am I defining the layout incorrectly?

<style type="text/css">
    .content {
        position: relative;
        border-top-width: 1px;
        width: 100%;
        min-width: 960px;
        margin-top: -1px;
    }

    .content-container {
        border: 0;
        position: relative;
        width: 960px;
        border-radius: 0 0 0 0;
        margin: auto;
    }

    .left-menu-container {
        width: 188px;
        padding: 0 20px 0 0;
        border: 0;
        box-sizing: border-box;
        vertical-align: top;
        position: relative;
        display: inline-block;
    }

    .center-content-container {
        vertical-align: top;
        display: inline-block;
        min-height: 900px;
        width: 500px;
        border-left: 1px solid #EBEBEB;
        border-right: 1px solid #EBEBEB;
        height: 100%;
        position: relative;
        padding: 15px 0 0 0;
    }

    .center-content-subcontainer {
        padding: 0 0 0 5px;

    }

    .right-menu-container {
        vertical-align: top;
        display: inline-block;
        width: 260px;
        border: solid;
        position: relative;
    }

    .right-menu-subcontainer {
        margin: 16px 0 0 0;
    }   

    #slideshow {
        position:relative;
        height:250px;
        width: 250px;
        overflow: hidden;
        background-color: #ffffff;
    }

</style>

How can I get this to display correctly across browsers?

<body>
<div class="content">
    <div class="content-container">
        <div class="left-menu-container"></div>

        <div class="center-content-container">
            <div class="center-content-subcontainer"></div>
        </div>

        <div class="right-menu-container">
            <div class="right-menu-subcontainer">
                <div id="slideshow" align="center">
                    <img src="" alt="Slideshow" title="Slideshow" width="250" height="100">
                </div>
            </div>
        </div>
    </div>
</div>


</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In FF 5.x the box widths are this:

    Left: 188 + 20 (width+ padding)
Center: 500 + 1 + 1 (width + L & R borders)
Right: 260 + 3 + 3 (width + L & R borders)

Total: 976

    Firebug’s Layout Inspector is your friend here.

    • 0