Home/ Questions/Q 767973
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T18:06:32+00:00

is it possible with just css2 to have the following: all the content to

  • 0

is it possible with just css2 to have the following:

  • all the content to be in the flexible div.mid section
  • overlap the top and bottom parts
  • not fussed about ie6

here’s the photoshop with centre slice:

alt text

as you can see the top and bottom parts are quite large and i need to overlap them from the middle slice…

Please dont misunderstand here, i understand how to make a flexible central div, the complexity is in the overlapping of the top and bottom while the mid div remains flexible.

I imagine it requires either negative margins or absolutely position top and bottoms elements with z-index..

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a kickoff example, you can copy’n’paste’n’run it.

    <!doctype html>
<html lang="en">
    <head>
        <title>SO question 2781669</title>
        <style>
            #wrap_centre {
                width: 1000px;
                margin: 0 auto;
            }
            .top {
                padding: 0 100px;
                height: 200px;
                background: url('http://i39.tinypic.com/11qnzbt.jpg') no-repeat center top;
            }
            .mid {
                padding: 0 100px;
                background: url('http://url.to.1px.height.slice.jpg') repeat-y center center;
            }
            .content {
                position: relative;
                min-height: 200px;
                top: -100px;
                margin-bottom: -200px;
            }
            .bot {
                padding: 0 100px;
                height: 250px;
                background: url('http://i39.tinypic.com/11qnzbt.jpg') no-repeat center bottom;
            }
        </style>
    </head>
    <body>
        <div id="wrap_centre">
            <div class="top"></div> 
            <div class="mid">
                <div class="content">mid<p>mid<p>mid<p>mid<p>mid<p>mid<p>mid</div>
            </div>             
            <div class="bot"></div> 
        </div>
    </body>
</html>

    You’ll only have to create a new slice for the .mid.

    Update: as per the comments, above is updated.

    • 0