Home/ Questions/Q 8873293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T18:25:46+00:00

Any idea how to achieve the layout indicated in the image below with pure

  • 0

Any idea how to achieve the layout indicated in the image below with pure CSS, if the order of the divs in the markup must be as follows?

NOTE – The height of each panel is unknown; wrapper divs may be added to the markup

<body>
  <div id="content"></div>
  <div id="nav"></div>
  <div id="search-results"></div>
</body>

Layout puzzle

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This technique is taken from the question
    Make a div display under another using CSS in a totally fluid layout.

    It uses CSS table presentation using properties of display: table family to rearrange the presentation order of dom elements.

    As said in the above question:

    This works in all modern browsers, and IE8 if you’re careful. It does
    not work in IE6/7.

    HTML

    <div id="wrapper">
    <div id="content-wrapper">
        <div id="content">content</div>
    </div>
    <div id="nav-search-block">
        <div id="nav-wrapper">
            <div id="nav">nav</div>
        </div>
        <div id="search-results-wrapper">
            <div id="search-results">search-results</div>
        </div>
    </div>
</div>​

    CSS

    #wrapper {
    display: table;
    width: 100%;
}

#nav-wrapper, 
#search-results-wrapper {
    float: left;
    width: 50%;
}

#nav, 
#search-results {
    color: #ffffff;
    background: #6699ff;
    padding: 10px;
    margin: 10px;
}

#nav-search-block {
    display: table-row-group;
}

#content-wrapper {
    display: table-footer-group;
}

#content {
    color: #ffffff;
    background: #cc0000;
    padding: 10px;
    margin: 10px;
}​

    Demo

    • 0