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


Tags: html,css,height,border

Problem :

First question on SOF, please be gentle if this may be a stupid question. :) Havent found a solution, neither here nor on the web.

I got some trouble with CSS. I pasted my code at the end of this post but first Ill explain what Im trying to accomplish:

I want to build a centered fixed-width content area with endless vertical graphical borders to the left and right.

This is what I tried:

  1. I created a #content div with a .wrapper div inside. Standard procedure to center a div Id say. Gave the #content the background property for the left border and the .wrapper div the right background. #content works fine: endless left border. But .wrapper stays the same height as its content. So if there is less content then the browser-height the border wont be endless.

  2. If I set the content heights to 100% the borders show till the bottom of the page, but if the content is higher then the browser height and I scroll down the borders dont continue.

  3. I inserted another div between #content and .wrapper: #contentbr and gave that div the same propertys as #content but with the right border graphic: Wont work, the height stays the same as the content of the wrapper.

Tried some more minor tweaks but neither worked out the way I want it.

Sad thing is: Nr. 2 works fine if I set the background property of #content to this: _background: url(img/content_left.png) top left repeat-y, url(img/content_left.png) top right repeat-y;_

Sadly the IE doesnt know CSS 3 so this is no solution as I cant ignore the IE.. :(

So im hoping for some help of you guys. Someone has to know how to do this magic.


Important notice on my HTML & CSS example: I replaced the background-properties with border-properties. In reality the left and right borders need to be two different images and use the commented backround-properties!

HTML & CSS:

<!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;

            height: auto !important;
            height: 100%; /* IE 6 Workaround */
            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;

            height: auto !important;
            height: 100%; /* IE 6 Workaround */
            min-height: 100%;

            padding: 0px 70px;
        }
    </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>


Solution :

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


    CSS Howto..

    How to target the text in an element but not the text in nested elements with CSS

    How to align form at the center of the page in html/css

    how to set the default css validation scheme in visual studio 2010?

    How to not make text colored within a href link but the text is also within div?

    How to implement a version of css?

    how can I set my gradient background in css for full width and height of the page?

    How to use CSS sprites in table sorting headers?

    How to remove css : hover using jquery?

    How to make this in html and css?

    How to style the NSString using CSS?

    Hide element, but show CSS generated content

    How to apply properties to 3 types of input on HOVER?

    How to do CSS wild card search? [duplicate]

    css - I've got a nested floating div, how do I get it to fill the entire 100%?

    How to change label using CSS?

    how to make a child div visible when clicking its parent div in pure css

    How to fit a div container to cover all the remaining space in between?

    How to center post title in blogger. (tried applying CSS)

    How to I make a button clickable with HTML/CSS? It needs to be centered along with a title over an image

    How do I keep my exiting CSS from compiled LESS

    How to extend background CSS styling indefinitely along the x-axis?

    How to make css counter works with css selector?

    How to align text vertically

    how can I combine button with input?

    HTML, CSS: how can I merge these divs in order to use float:left property on their children?

    How to vertically align text to the right of some text using css? [closed]

    How to hide element label by element id in CSS?

    How to define `autocomplete=“off”` as a CSS style?

    How to change my css code to fit the footer to the bottom of the page for any size of monitor?

    How To Remove Wordpress Title From One Page?