ansaurus

Question

CSS: How to define a centered div with endless vertical borders and an initial height of 100%?

Answer 1

+1 A:

The min-height hack, as far as I know requires that you put the properties in the following order:

min-height: 100%;
height: auto !important;
height: 100%;

Maybe I'm wrong, but I was certain that was the only way around it.

If you've got a 100% height div in th center of the page why don't you create a repeating background that you can apply to the body, or the outer-most container that will repeat to the maximum size of the box possible?

Or, just use:

border: solid #000;
border-width: 0 1px;

on your outer div

Alex 2010-09-21 13:57:30

hanboh 2010-09-21 14:04:17

Backgrounding the body is the best way to go about it, particularly if you have to support IE6. Just make the background `center top repeat-y` and it will track the content position.

Stan Rogers 2010-09-21 14:07:01

The body will have an own background-property and thus cant be used for this.

hanboh 2010-09-21 14:19:43

And I don't suppose there's any way you can think of to composite the graphics to make them all one? I do that pretty regularly.

Stan Rogers 2010-09-21 14:24:51

Answer 2

+1 A:

I removed the margin and padding from all elements to prevent the gap between document edge and border.

 * { margin: 0; padding: 0; }

To use the 100% height on the #wrapper as well as the #content div, use this:"

#content { position: relative } 
#wrapper { position: absolute }

This is what I get:

http://manson.revora.net/test.html

Litso 2010-09-21 13:58:44

hanboh 2010-09-21 14:09:08

I figured that out just half a minute ago. I found a solution though: just set the #content to a `position: relative` and the #wrapper to `position: absolute`. This allows the 100% height to work for both divs. I updated the linked page.

Litso 2010-09-21 14:19:25

Great, it works! If you update your answer Ill mark it as the accepted answer.

hanboh 2010-09-21 14:31:17

Answer updated :)

Litso 2010-09-21 14:43:05

One last problem: If the filler text exceeds the browser height the left border wont continue downwards. Ill try to figure that out.

hanboh 2010-09-21 14:46:56

Answer 3

+1 A:

Changed the layout a bit.

From .wrapper I removed all height information.

From #content I removed the height: auto !important; and outsourced the height: 100%; to * html #content { height: 100%; } just below #content and .wrapper

Now it works the way it should (even with graphical borders). Inital height of 100% and continuing borders if content exceeds window height:

<!doctype html>
<html>
<head>
    <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
    <style type="text/css">
        html, body { height: 100%; }

        #content 
        {
            margin: 0 auto;
            width: 950px;

            /* this is the real deal: */
            /* background: url("img/content_left.png") top left repeat-y; */

            /* this is just for the example */
            border-left: 1px solid black;

            min-height: 100%;
        }

        #content .wrapper
        {
            /* this is the real deal: */
            /* background: url("img/content_right.png") top right repeat-y; */

            /* this is just for the example */
            border-right: 1px solid black;
            padding: 0px 70px;
        }

        * html #content
        {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="wrapper">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada, lorem ut lobortis congue, ligula risus condimentum enim, 
                vel ornare mi elit et purus. Duis justo libero, posuere nec ullamcorper nec, tempus nec augue. Maecenas rhoncus, sapien a dapibus 
                accumsan, nisl mi gravida arcu, id congue neque nisi vitae lacus. Morbi dapibus mollis tempor. Praesent tortor ipsum, rhoncus in 
                rhoncus sit amet, luctus nec nibh. Donec enim massa, fermentum et consectetur et, iaculis nec tortor. Mauris massa elit, pellentesque 
                id vestibulum in, vehicula nec elit. In congue purus vitae mauris adipiscing a sollicitudin dolor consectetur. In lacus lectus, 
                auctor nec facilisis non, tempus ut neque. Sed id elit vel dui porta condimentum vitae ac lorem. Nam suscipit elit ac est sollicitudin 
                sed faucibus tellus aliquam. Sed quis libero odio, pellentesque fermentum odio. Aliquam hendrerit dignissim sapien a vestibulum. 
                Phasellus aliquam pretium erat eu feugiat. Quisque enim arcu, sagittis at venenatis quis, auctor vitae diam. Donec sed arcu sapien. 
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla eget lacus id enim pulvinar ullamcorper.
            </p>
    </div>
    </div>
</body>
</html>

hanboh 2010-09-21 15:17:50

ansaurus

tags:

views:

answers:

CSS: How to define a centered div with endless vertical borders and an initial height of 100%?

related questions