the width for my content is 900px, but i dont know how to add the side bar, witht econtact info? any ideas? please and thank you?
Well... first off a 'fixed width' design is automatically a steaming pile of /FAIL/ at web development, but even if I was forced to work in some re-re garbage setup where I 'had' to work fixed width, I'd still design that as a fluid layout and then let the outermost container hold it. You've got a simple two primary columns -- that's easy with a double-wrapper and negative indent... to make the inner fieldset auto-fill the width properly I'd pad the left side of the fieldset enough EM to fit the longest LABEL, use a nested SPAN inside LEGEND to replicate the heading behavior with absolute positioning (sucks but semantically that "feedback" should probably be a LEGEND), float the labels with a negative margin and then set all the input to width:98% or something along those lines. I'm on the lappy right now, but when I'm back at my workdesk I can toss together an example of that for you. No guarantees on when that will be though -- on my second saline drip to treat dehydration from the flu in the ER right now so... (What else am I gonna do?)
For reference, the HTML will probably look something like this: <div class="columnWrapper"> <div class="contentWrapper"><div class="content"> <form action="#" method="post" id="feedback"> <h2>Feedback</h2> <fieldset> <label for="feedbackName">Name:</label> <input type="text" id="feedbackName" name="name" /> <br /> <label for="feedbackEMail">E-Mail:</label> <input type="text" id="feedbackEMail" name="email" /> <br /> <label for="feedbackPhone">Phone:</label> <input type="text" id="feedbackPhone" name="phone" /> <br /> <label for="feedbackMessage">Message:</label> <textarea id="feedbackMessage" name="message" rows="13"></textarea> </fieldset> <div class="submitsAndHiddens"> <input type="reset" value="clear" /> <input type="submit" value="send" /> <input type="hidden" name="fromForm" value="feedback" /> <!-- .submitsAndHiddens --></div> </form> <!-- .content, .contentWrapper --></div></div> <div class="sideBar"> <div class="info"> <h2>Our Contacts</h2> 24 Hour Emergency Towing<br /> Monday-Friday: 7:30 AM to 6:00 PM<br /> Saturday: 7:30 AM to Noon<br /> Night Drop Available <img src="images/map.jpg" alt="map" class="plate" /> Demolink.org 8901 Marmora Road,<br /> Glasgow, D04 89GR. <span>Telephone:</span> +1 959 552 6963<br /> <span>Fax:</span> +1 959 552 5963<br /> <span>E-Mail:</span> <a href="#">mail@demolink.org</a> <!-- .info --></div> <!-- .sideBar --></div> <!-- .columnWrapper --></div> Code (markup): that's a rough untested bit of markup though...(I ditched using a legend for simplicity sake) generally I don't believe in starting from a goofy picture of a website. Markup the content semantically first -- add a few common wrappers using tags that are semantically neutral, and then use CSS to bend it to your will to make the layout -- BEFORE you let anyone do a blasted thing in the goofy paint program like Photoshop. That's how you get accessible gracefully degrading design, instead of the fixed width fixed font accessibility train wrecks that seem to become more and more the norm every day.
Here's what I came up with: http://www.cutcodedown.com/for_others/austinTucker/feedback/template.html It's fluid so you should be able to drop everything inside .contentWrapper into most any layout. As with all my examples the directory: http://www.cutcodedown.com/for_others/austinTucker/feedback/ Is wide open for easy access to it's bits and pieces. Took a few stylistic liberties (like the widths of the normal INPUT), and I'd suggest NOT using so light a text color as the image had (below accessibility minimums), keeping everything in EM ( so it's accessible), NOT using a fixed width layout -- you know, all the hallmarks of "But I can do it in photoshop" you had there. I'd also suggest keeping the submit/clear styled as buttons instead of trying to strip the formatting off them. INPUT won't receive text-shadow anyways (damned if I know why) -- of course all the rounded corners and stuff doesn't show up in IE8/lower, OH WELL. In any case, should work fairly well for you -- hope this helps.