OK, I am sure I am just mising something so ridiculously simple… but I can’t for the life of me figure out what it is. I am working on a site that has a custom fade border image. So I have 4 images to lay it all out (5 actually), one is the header image, one is the footer, then I have a left and right for the main body, each 5px tall that I repeat-y. (The 5th image is a combination of the left and right that I can use across the page which is fixed width as per the clients request).
So I have 2 columns in the main body section floated left and right, but when column A is longer than column B the border image doesn’t go all the way down column B. I know I’ve addressed this before, but it was awhile ago (and not sure if that time I was using an image like this). How do I get both columns to fill with the outside border image to match the column lengths?
Secondly (and this might be a solution to the top issue) when I use the full width image as a background in a div it doesn’t show up at all. At least as far as I am seeing. I’m including code and a few images to hopefully make this clear, but if it isn’t just ask and I’ll straighten up my lack of detail in explaining this.
Thanks! The forums here are the best resource any web designer could ever hope for!
Greg
Here is the code for my files:
TEST.HTML
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="mainbody">
<div id="aside">
<h2>
<br /><br /><br />
This is the ASIDE area
<br /><br /><br />
<br /><br /><br />
This is the ASIDE area and it is taking up all the space it needs and will wrap the text when it reaches the limit of the page width
<br /><br /><br />
<br /><br /><br />
This is the ASIDE area
<br /><br /><br />
</h2>
</div>
<div id="content">
<h2>
<br /><br /><br />
This is the CONTENT area
<br /><br /><br />
<br /><br /><br />
This is the CONTENT area and it is taking up all the space it needs and will wrap the text when it reaches the limit of the page width
<br /><br /><br />
<br /><br /><br />
This is the CONTENT area
<br /><br /><br />
</h2>
</div>
</div>
<div id="bottom">
<h2>
This is the bottom text
</h2>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
TEST.CSS
body {
background: #043520;
}
h2 {
text-align: center;
vertical-align: middle;
}
#header {
background: url(images/aag-logo.jpg);
height: 202px;
}
#wrapper {
margin: auto;
width: 860px;
background: red url(images/border-left.jpg) repeat-y;
}
#aside {
display: block;
float: left;
width: 240px;
border-radius: 15px;
margin: 10px 25px;
background: #cec2b4;
background-position: left 100%;
}
#content {
display: block;
float: right;
width: 535px;
padding-right: 25px;
background: #ffffff url(images/border-right.jpg) repeat-y;
background-position: right 100%;
}
#mainbody {
background: green;
}
#bottom {
color: blue;
clear: both;
background: green url(images/border-body.jpg) repeat-y;
}
#footer {
clear: both;
background: url(images/border-bottom.jpg) no-repeat;
height: 102px;
}