1. Home
  2. Forums Index
  3. Browser Side / CSS 9:24 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

background image won't stretch

Help fix my css :)

         

deco10

2:32 pm on Jun 8, 2009 (gmt 0)

10+ Year Member



Basically I want to have a div with rounded corners and borders I designed myself. However I seem to have an issue with getting the background image (left and right borders) to use the full height of its parent containers, so it doesn't work so well when a pane has a lot of content (enough to push it down far enough to create a scroll bar in the browser).

Any help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
<style>
body {text-align: center;}

#wrapper {
margin: 0 auto;
text-align: left;
width: 80%;
overflow: hidden;
}

#header {
width: 100%;
background-color: blue;
}

#leftpane {
float: left;
width: 19%;
background-color: green;
}

#content {
width:50%;
float: left;
margin: 0px 1%;
background-color: red;
}

#rightpane {
width: 29%;
float: right;
background-color: yellow;
}

#footer {
width: 100%;
clear: both;
background-color: orange;
}

.panecontent {
display: inline;
float:left;
width: 90%;
}

.leftbar {
height: 100%;
width:5px;
display:inline;
background-color: black;
float:left;
}

.rightbar {
height: 100%;
width: 5px;
display:inline;
background-color: black;
float: right;
margin: 0px;
}
</style>
</head>
<body>
<div id="wrapper"><br>
<div id="header"><br></div>

<div id="mainbody"><br>
<div id="leftpane">
<div class="topbar"></div>
<div class="leftbar"></div>
<div class="panecontent">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu</div>
<div class="bottombar"></div>
<div class="rightbar"></div><br>
</div>

<div id="content">
<div class="topbar"></div>
<div class="leftbar"></div>
<div class="panecontent">body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body</div>
<div class="bottombar"></div>
<div class="rightbar"></div>
</div>

<div id="rightpane">
<div class="topbar"></div>
<div class="leftbar"></div>
<div class="panecontent">rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside</div>
<div class="bottombar"></div>
<div class="rightbar"></div>
</div><br>

</div><br>
<div id="footer">
<div class="topbar"></div>
<div class="leftbar"></div>
<div class="panecontent">footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer</div>
<div class="bottombar"></div>
<div class="rightbar"></div>
</div>

</div>
</body>
</html>

[edited by: SuzyUK at 8:14 pm (utc) on June 8, 2009]
[edit reason] tidied code formatting/spacing [/edit]

enigma1

9:36 am on Jun 9, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Deco10 welcome to these forums.

You can use a high number to cover any res with a positive padding and negative margin for the various sections. You also need to setup the css for some divs I could not see them in your style section.

Here is a moded version of your code 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test</title>
<style type="text/css">
body {text-align: center;}
#wrapper {
margin: 0 auto;
text-align: left;
width: 80%;
overflow: hidden;
position: relative;
}
#header {
width: 100%;
background-color: blue;
height: 20px;
text-align: center;
}
#mainbody {
 padding: 1px;
 margin: 0;
position: relative;
float: left;
}
#leftpane {
float: left;
width: 19%;
background-color: green;
padding-bottom:10000px; margin-bottom:-10000px;
}
#content {
width:50%;
float: left;
margin: 0px 1%;
background-color: red;
padding-bottom:10000px; margin-bottom:-10000px;
}
#rightpane {
width: 29%;
float: right;
background-color: yellow;
padding-bottom:10000px; margin-bottom:-10000px;
}
#footer {
width: 100%;
clear: both;
background-color: orange;
padding-bottom:10000px; margin-bottom:-10000px;
position: relative;
float: left;
}
.panecontent {
float:left;
width: 90%;
}
.leftbar {
width:5px;
background-color: black;
float:left;
padding-bottom:10000px; margin-bottom:-10000px;
}
.rightbar {
width: 5px;
background-color: black;
float: right;
margin: 0px;
padding-bottom:10000px; margin-bottom:-10000px;
}
</style>
</head>
<body>
 <div id="wrapper">
 <div id="header">Header</div>
 <div id="mainbody">
 <div id="leftpane">
 <div class="topbar"></div>
 <div class="leftbar"></div>
 <div class="panecontent">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu</div>
 <div class="bottombar"></div>
 <div class="rightbar"></div>
 </div>
 <div id="content">
 <div class="topbar"></div>
 <div class="leftbar"></div>
 <div class="panecontent">body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body bodybody body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body</div>
 <div class="bottombar"></div>
 <div class="rightbar"></div>
 </div>
 <div id="rightpane">
 <div class="topbar"></div>
 <div class="leftbar"></div>
 <div class="panecontent">rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside rightside</div>
 <div class="bottombar"></div>
 <div class="rightbar"></div>
 </div>
 </div>
 <div id="footer">
 <div class="topbar"></div>
 <div class="panecontent">footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer</div>
 <div class="bottombar"></div>
 </div>
 </div>
</body> 
</html>

You may need to work on adding a spacer div or some margin for the footer as the mid section now overflows due to the padding to setup a border or space in-between. The height 100% setting has no effect there so I removed those entries, same for the display:inline

I also setup the mainbody tag as it should be set properly and it's critical for cross-browser compatibility.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 9:24 pm May 1, 2026