Garrett

Well I appear to be my own best helper...Here is a solution that works without the <br /> tags. For some reason I thought I couldn't have block elements within inline ones... I'm still not crazy about having a <div> simply for creating a line break, seems the same as a <br /> tag but I can see no way around it. <style type="text/css"> <!-- .block { display: block; } .formUnit { float: left; margin: 0 15px 0 0; } .clearLeft { clear: left; } --> </style> <p class="formUnit"><label class="block">Address</label><input type="text" /></p> <div class="clearLeft"></div> <p class="formUnit"><label class="block">City</label><input type="text" /></p> <p class="formUnit"><label class="block">State</label><input type="text" size="2" /></p> <p class="formUnit"><label class="block">Zip</label><input type="text" size="5" /></p>

As a follow up to my own post, here is one way I can think of to fake what I want. <style type="text/css"> <!-- .block { display: block; } .formUnit { float: left; display: inline; overflow: hidden; margin: 0 15px 0 0; } .clearLeft { clear: left; } --> </style> <p class="formUnit"><label>Address</label><br /><input type="text" /></p><br /> <div class="clearLeft"></span> <p class="formUnit"><label>City</label><br /><input type="text" /></p> <p class="formUnit"><label>State</label><br /><input type="text" size="2" /></p> <p class="formUnit"><label>Zip</label><br /><input type="text" size="5" /></p> But this solution requires the use of the <br /> tag which is presentational markup...Any other ideas?

Hello, I am creating a form and I wish to achieve the following layout: I would like the markup to make sense semantically. My current code is as follows: <style type="text/css"> <!-- .block { display: block; } --> </style> <label class="block">Address</label><input type="text" /> <label class="block">City</label><input type="text" /> <label class="block">State</label><input type="text" /> <label class="block">Zip</label><input type="text" /> In this way, I think of the label and its corresponding <input> as a unit. My current code, of course, makes the <label> appear on its own line, but how should I go about getting a few of these "units" to appear on the same line, while keeping the <label element> on its own line? I have considered a couple ways of faking this layout, using floats, and/or changing the order in which the elements appear in the html... <span class="block"><label>City</label><label>State</label><label>Zip</label></span> <input type="text" /> <input type="text" /> <input type="text" /> ...and while this would work, it doesn't make as much sense semantically, because if a user doesn't have CSS enabled, the inputs and corresponding labels won't be near each other. To wrap this all up, I am looking for a "best practice" solution to achieve the aforementioned layout, one that makes sense semantically and displays in a functional way with or without CSS enabled. If anyone has any suggestions/ideas, I would be in their debt. Thanks in advance... Garrett