Home/ Questions/Q 1102459
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T01:11:23+00:00

First question on SOF, please be gentle if this may be a stupid question.

  • 0

First question on SOF, please be gentle if this may be a stupid question. 🙂
Haven’t 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 I’m 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 won’t 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 don’t 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: Won’t 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 doesn’t know CSS 3 so this is no solution as I can’t 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0