ansaurus

Question

advanced css: top and bottom with flexible centre

Answer 1

A:

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.

BalusC 2010-05-06 14:49:23

thanks for your time balus, but did you see the bit about overlapping the top and bottom elements?

Haroldo 2010-05-06 14:54:08

Apparently I misunderstood that part. Can you elaborate more?

BalusC 2010-05-06 14:55:12

as you can see the top and bot parts are pretty tall, i want to use them but have the content start say 100px from the top of the top and run to 100px from the bot of the bot - if that makes sense?

Haroldo 2010-05-06 14:57:32

I see. Well, that's going to be tricky. I was forced to add another div inside `.mid`. See my updated answer. `min-height` doesn't work in IE6 btw.

BalusC 2010-05-06 15:35:31

absolute legend! very clever, works a treat

Haroldo 2010-05-06 15:48:44

ansaurus

tags:

views:

answers:

advanced css: top and bottom with flexible centre

related questions