I have started using gutters in my designs to add padding to my divs.
Now they work fine until I drop a form into the div with the gutter class applied and it doesn't seem to work.
Code:
<div id="content">
<div class="gutter">
<h1>Enquiry Form</h1>
<p>Make your support enquiry by filling out the form below.</p>
<form class="gutter" action="<?php echo $editFormAction; ?>" id="enquiryForm" method="post">
<dl>
<dt><label for="name">Name:</label></dt>
<dd><input name="name" type="text" class="widebox" id="name" />
</dd>
<dt><label for="company">Company:</label></dt>
<dd><input name="company" type="text" class="widebox" id="company" />
</dd>
<dt><label for="email">Email:</label></dt>
<dd><input name="email" type="text" class="widebox" id="email" />
</dd>
<dt><label for="product">Product:</label></dt>
<dd><input name="product" type="text" class="widebox" id="product" />
</dd>
<dt><label for="enquiry">Enquiry/Problem:</label></dt>
<dd><textarea name="enquiry" cols="30" rows="5" id="enquiry" ></textarea>
</dd>
<dt><input name="sendCom" type="submit" value="submit" /></dt>
</dl>
</form>
</div>
</div>
Code:
#content .gutter {
padding: 10px 20px 10px 5px;
}
Page here
Any ideas?