PayneLess Designs - Textarea Boxes - Side by Side

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Textarea Boxes - Side by Side</title>
<link rel="stylesheet" type="text/css" href="css_page_designs.css">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="generator" content="Matrix Y2K from van IJperen Software Inc. - http://www.crystalfibers.com">
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
body {
font-size: 1.25em;
color: #fff;
background: #000;
}

div#wrap {
width: 800px;
margin: 2% auto;
border: 5px inset #070;
background: #f0f;
}

div#contents {
width: 100%;
padding: 1%;
}

h1, h2, h3, h4 {
text-align: center;
color: #0f0;
}

div#side-by-side_centering {
width: 745px;
margin: 0 auto;
}

div#textarea_centering {
clear: both;
width: 745px;
margin: 1% auto;
}

textarea {
font-size: 1.0em;
font-weight: bold;
}

strong { color: #600; }

p.blocked {
text-align: justify;
padding: 5px;
margin: 0 2%;
clear: both;
}
</style>
</head>
<body>
<div id="wrap"><!-- START WRAP --><div id="contents"><!-- START CONTENTS -->

<h1>Textarea Boxes - Side by Side</h1>

<div id="side-by-side_centering">
<div style="float: left;">
<p><a class="selectall" href="#" onclick="document.getElementById('postemail').select(); return false">Select All</a><br><textarea id="postemail" style="background: transparent;" rows="8" cols="25">Text here if wanted</textarea></p>
</div>

<div style="float: right;">
<p><a class="selectall" href="#" onclick="document.getElementById('postemail1').select(); return false">Select All</a><br><textarea id="postemail1" style="background: transparent;" rows="8" cols="25">Text here if wanted</textarea></p>
</div>
</div>

<div id="textarea_centering">
<p>Select code used for "Textarea Boxes - Side by Side" below:</p>
<p><a class="selectall" href="#" onclick="document.getElementById('postemail2').select(); return false">Select All</a><br><textarea id="postemail2" style="background: transparent;" rows="8" cols="70">
CSS:

div#side-by-side_centering {
width: 745px;
margin: 0 auto;
}

HTML:

&lt;div id="side-by-side_centering">
&lt;div style="float: left;">
&lt;p>&lt;a class="selectall" href="#" onclick="document.getElementById('postemail').select(); return false">Select All&lt;/a>&lt;br>&lt;textarea id="postemail" style="background: transparent;" rows="8" cols="25">Text here if wanted&lt;/textarea>&lt;/p>
&lt;/div>

&lt;div style="float: right;">
&lt;p>&lt;a class="selectall" href="#" onclick="document.getElementById('postemail1').select(); return false">Select All&lt;/a>&lt;br>&lt;textarea id="postemail1" style="background: transparent;" rows="8" cols="25">Text here if wanted&lt;/textarea>&lt;/p>
&lt;/div>
&lt;/div></textarea>
</div>

<p class="blocked">If using the Select All function in more than one text box on the same page, just change "onclick="document.getElementById('<strong>postemail</strong>')" to "onclick="document.getElementById('<strong>postemail2</strong>')" and change "&lt;textarea id="<strong>postemail</strong>"" to "&lt;textarea id="<strong>postemail2</strong>"." Do this for each added textarea box incrementing the "Id" value in both places.</p>

<p><a href="http://validator.w3.org/check?uri=referer" title="Valid HTML 4.01 Strict"><img style="width:88px; height:31px; border:0;" src="http://www.w3.org/Icons/valid-html401-blue" alt="Valid HTML 4.01 Strict"></a><a href="http://jigsaw.w3.org/css-validator/" title="Valid CSS!"><img style="width:88px; height:31px; border:0;" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"></a></p>
</div><!-- END CONTENTS --></div><!-- END WRAP -->
</body></html>