Centered 2 Column Design
September 24th, 2004After successfully finding a centered 2 column design and hacking it to pieces before installing it on my own site, I had some trouble with forms, IE 5.2 Mac, and the two column layout. I thought I would share my experience with all of you here.
I’ll pretty much cut to the chase, but I wanted to point out that for some reasonALA’s form did not work for me. There were a variety of others that I found that also didn’t work, I can’t say why because I really don’t know. I think it had something to do with my wanting the form on the left side of a 2 column layout.
So the final solution was this:
<div id="allcontent">
<h4> Interested in Pixel Conductor's services? </h4> <h5> Send him a note below. </h5>
<div id="leftcontent">
<div id="form">
<form method="post" action="http://www.pixelconductor.com/cgi-bin/cgiemail/cgiemail/station.txt">
<div>
<label for="name">Name:</label><input type="text" name="name" id="name" />
</div>
<div>
<label for="email">E-mail:</label><input type="text" name="email-required" id="email" />
</div>
<div>
<label for="text">Request:</label>
<textarea name="request" id="text" cols="20" rows="8">
</textarea>
</div>
<div>
<input type="submit" value="Send Your Message" class="formbutton" />
</div>
<div class="spacer">
</div>
</form>
</div>
</div>
<div id="rightcontent">
<img src="/images/ticketstub.jpg" alt="Ticket Stub" />
</div>
</div>
(Thanks to BBedit for the code converison.)
Nothing special here, just three main divs, one that holds everything and one for each side. The CSS here:
div#form {
width: 320px;
padding: 0;
margin: 1em;
margin-top: 0;
border: 1px solid #AF9101;
text-align: right;
}
label, input, textarea {
display: block;
width: 180px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 100px;
padding-right: 10px;
}
input.formbutton {
margin-left: 110px;
width: 80px;
width: auto;
text-align: center;
padding-right: 2em;
}
This bit of code comes mostly from a form on html dog. It seems that getting the textarea and associated label to line up correctly was the most difficult part, (which actually doesn’t happen on the html dog site, but does on the ALA site) IE Mac does not like placing a label to the left of a text box. Ah well, so bask in it’s functionality and let me know if you have any better solutions.