Home/ Questions/Q 3321144
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T23:01:39+00:00

I have a css layout which is centered, with 100% height. Everything looks good

  • 0

I have a css layout which is centered, with 100% height. Everything looks good except that I need borders on the left and right side, with background images, that also must extend to 100% height of the page.

I’ve tried lots of different options but can’t seem to get this worked out.

Please take a look at my code and let me know what I can do. Keep in mind everything but the right and left columns is positioned as I need it.

The left and right columns are leftbdr and rightbdr.

Thanks for any assistance.

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Tmp Site Mockup</title> 
<!-- <link rel="stylesheet" type="text/css" href="assets/css/core2.css" /> -->
<style type="text/css">
html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:#E7E7E7 url(assets/img/bg.gif) repeat-x top;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:#9C090C;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:974px;
    background:#F2F8FB;;

    height:auto !important; /* all other browsers */
    height:100%; /* IE6: treated as min-height*/

    min-height:100%; /* all other browsers */
}

#leftbdr{
     width:49px; 
     float:left; 
     position:relative; 
     background:url(assets/img/lftSideShadow.jpg) repeat-y right top; 
 }
 #rightbdr{
     width:11px; 
     float:right; 
     position:relative; 
     background:url(assets/img/rgtSideShadow.jpg) repeat-y top;
 }

#header {
    height:22px;
    padding-top: 4px;
    padding-right: 27px;
    border: 1px solid #6B0100;
    background-color:#CE0200;
    color:#FFFFFF;
    text-align: right;
}

    #header p {
        font-family: Tahoma, arial;
        font-size:11px;
        margin:0;
    }
#subheader {
    height:122px;
    border-bottom:2px solid #B3B3B3;
    background-color: white;
}

#welcome {
    height:31px;
    border-top:1px solid white;
    border-bottom:1px solid white;
    background-color: #C20F00;
}

#topnav {
    height:62px;
    background:#B1B1B1 url(assets/img/topNavBG.jpg) no-repeat left top;
}
    #topnav p{
    text-align:right;
    padding-right:22px;
    font-size:10px;
    color:#333;
    }

#content {
    padding:1em 1em 5em; /* bottom padding for footer */
    background:#F2F8FB;
}
    #content p {
        text-align:justify;
        padding:0 1em;
    }

#footer {
    position:absolute;
    height:72px;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#9C090C url(assets/img/footerBG.gif) repeat-x;
    color:white;
}
    #footer p.left { 
        float: left;
        padding-left:15px;
        padding-top:7px; 
    }
    #footer p.right { 
        float: right;
        padding-right:15px;
        padding-top:7px;
    }
</style>
</head>

<body> 

<div id="container"> 

    <div id="leftbdr" > &nbsp; </div>

    <div id="header"> 
        Home &nbsp;|&nbsp; Website.com &nbsp;|&nbsp; My Site &nbsp;|&nbsp; Logout 
    </div> 
    <div id="subheader">
    &nbsp;
    </div>
    <div id="welcome">
    &nbsp;
    </div>
    <div id="topnav">
    <p><input name="radiobutton" type="radio" value="radiobutton" />All <input name="radiobutton" type="radio" value="radiobutton" />Documents <input name="radiobutton" type="radio" value="radiobutton" />People <input name="radiobutton" type="radio" value="radiobutton" />Google</p>
    </div>

    <div id="content"> 
        <h2>Lorem ipsum dolor</h2> 
        <p> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque arcu eget massa laoreet sit amet eleifend sapien accumsan. Sed ut tellus augue. Phasellus non blandit sem. Aliquam consequat ipsum rhoncus augue vehicula suscipit. Nunc laoreet gravida magna nec sodales. Cras quis lorem erat. Suspendisse eu urna in lorem placerat venenatis. Curabitur sed turpis in nulla convallis blandit. Donec ut tortor libero. Donec ante eros, facilisis vitae dictum eu, ornare nec libero. Nulla turpis purus, eleifend ac porta adipiscing, adipiscing non odio.
        </p> 
        <h2>Vestibulum eu purus</h2> 
        <p> 
            Vestibulum eu purus ut enim eleifend sodales vel a purus. Aenean at orci dolor. Sed suscipit lorem nec est venenatis rutrum. Maecenas tempor, mi ac molestie suscipit, augue diam ultricies nibh, sit amet faucibus nulla leo vel nunc. Integer magna est, egestas nec placerat vel, pulvinar sed erat. Sed blandit ligula ac sapien venenatis rutrum. Aenean nec velit ut neque pharetra lobortis. Sed vulputate, ante ut euismod semper, nisi ante viverra ipsum, ac malesuada tellus nibh in tellus. Proin non velit ligula, eget egestas sapien. Curabitur ut viverra leo. Suspendisse pellentesque mauris lectus. Aenean sed arcu eleifend tortor cursus dapibus id in turpis. Nullam neque purus, congue id consectetur ut, dignissim id dolor. Praesent vehicula arcu vitae tellus lobortis mollis. Sed nec dapibus orci. 


        </p> 
        <h2>Maecenas faucibus sapien</h2> 
        <p> 
            Vestibulum at nibh nec elit pulvinar feugiat vel et erat. Maecenas faucibus sapien at enim dictum pharetra ac et augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor consequat auctor. Phasellus eu nibh nulla. Donec tempor scelerisque sodales. Fusce id neque quam. Cras sollicitudin dictum nisi, eu facilisis velit sodales quis. Aenean tempus congue erat in consequat. Curabitur odio ipsum, luctus sit amet accumsan quis, consequat nec elit. Nunc tristique nunc eget metus placerat vitae consequat erat tempus.
        </p> 
        <p>&nbsp;</p>
    </div> 
    <div id="footer"> 
        <p class="left"> 
            2010 Company Name, Inc. All Rights Reserved.<br />
            <span style="color:#CCCCCC;">For internal use only by Company employees. Please do not disturibute.</span>
        </p>

        <p class="right">
        Company Home &nbsp;|&nbsp; My Site &nbsp;|&nbsp; Log Out
        </p> 
    </div>
    <div id="rightbdr" > &nbsp; </div> 
</div> 
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    #container is the key. It takes up the full area of your page. You could apply a background/border style to it and/or <body> to achieve what you want.

    For example a repeating image slice on <body> that is centered with repeat-y could give the effect of a graphical border without needing leftbdr and rightbdr.

    • 0