Hi there Sitepoint, this is my first official post and I hope some of you GURUs can help me out. I’ll post the code below, but you can also see a screenshot of what I’m trying to achieve – as well as the actual HTML – at . . .
and click on ver. 99_899 in HTML which, because of google’s proprietary layout structure, needs to be opened cached or you won’t see it correctly. Alternatively you can just drop in the code below if you’re uncomfortable with opening the page in a non-static environment. Either way, the URL is in my public profile for permanent reference.
Well the objective here is very simple (or at least I hope so lol):
I’m trying to get that little page curl to stretch vertically + automatically resize (along with GRAPHIC1) so that all the edges join. Apologies for the garrish TILE I’m using, I wanted to be able to hilight any areas where the seams have holes.
Thanks for any help. I’m so glad I found this great site, and I’m looking forward to learning a TON about CSS, in particular.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SEMICODIN’S CSS MARKUP ◊◊◊◊DRAFT◊◊◊◊</title>
<style type="text/css">
body {margin: 0; background-image: url(http://sites.google.com/site/semicodin/ohTHAT/bracket/TILE.jpg);}
body,td,th {font-family: Arial; font-size: medium; color: #000000;}
h1,h2,h3,h4,h5,h6 {font-family: Arial;}
a:link {color: #009900; text-decoration: none;}
a:visited {color: #009900; text-decoration: none; color: #000000;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
#BANNEROW {margin-top: 50px; margin-left: 10%; margin-right: 10%;}
#BANNEROW div img {width: 66%;}
#LOGO {float: LEFT; background-color: #FFFFFF; width: 80%; }
#CURL {float: RIGHT; background-color: TRANSPARENT; width: 20%;}
#CONTENT {float: LEFT; background-color: #FFFFFF; padding: 7%; border: 3px solid #000000; margin-left: 10%; margin-right: 10%;}
#CONTENT div img {width: 80%;}
</style>
</head>
<body>
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ BANNEROW \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<div id="BANNEROW">
<div id="LOGO">
<div style="border-left: 3px solid #000000; border-top: 3px solid #000000; padding: 2%;">
<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket" target="blank">
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/GRAPHIC1.jpg" style="border: 0px;" title="CLICK ANY GRAPHIC" alt=""></a>
</div>
</div>
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CURL \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<div id="CURL">
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/CURLY.gif" style="border: 0px; width: 100%; height: 100%;" title="CLICK ANY GRAPHIC" alt=""></a>
</div>
</div><!-- Closing BANNEROW -->
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ CONTENT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<div id="CONTENT">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
odio sagittis blandit. Maecenas at nisl. Nullam
lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan
sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
venenatis. Suspendisse cursus velit vel ligula.
Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
suscipit. Aenean quis risus sit amet eros volutpat
ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
<br>
<br>
<div style="text-align: center;">
<a href="http://sites.google.com/site/semicodin/ohTHAT/bracket" target="blank">
<img src="http://sites.google.com/site/semicodin/ohTHAT/bracket/GRAPHIC2.jpg" style="border: 0px solid #5FB7FC;" title="CLICK ANY GRAPHIC" alt=""></a>
</div>
<br>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed
felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit
nisl in quam. Etiam augue pede, molestie eget,
rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget
odio sagittis blandit. Maecenas at nisl. Nullam
lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu
wisi. Ut ante dui, aliquet nec, congue non, accumsan
sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium
venenatis. Suspendisse cursus velit vel ligula.
Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis
suscipit. Aenean quis risus sit amet eros volutpat
ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br>
</div><!-- Closing CONTENT -->
</body>
</html>
(note clever icon). I needed to flush my buffer for a few days because it’s obvious my brain left the computer screen at some point and had been calling to my unwilling body to rejoin it in the analog world of all things corporeal heh. 
