Form Coming Out Wierd in HTML/CSS

Question

I'm trying to make a very simple form (picture above) with three columns but without using tables. Unfortunately for me, it's not as simple in code for me as it was in Photoshop. I've been fighting with the HTML/CSS below for an hour and this is the best I could get. Is there any chance somebody could please help me with my code?

<style type="text/css">* {
}
.containerANE {
overflow: hidden;
background: #C6DEFF;
width: 992px;
}

.rightANE {
 float: right;
 width: 30px;
outline: 1px solid #8191a6;
}
.leftANE {
 float: left;
 width: 152px;
outline: 1px solid #8191a6;
}
.middleANE {
 width:717px;
 outline: 1px solid #8191a6;
}</style>

<h1>E-mail US</h1>
<form action="confirmed.php" method="get">
<div class=containerANE>
<div class=rightANE>
<img width="25" src="Help-icon.png">
</div>
<div class=leftANE>
 Name
 </div>
 <div class=middleANE>
 <input type="text">
 </div>

<div class=rightANE>
 <img width="25" src="Help-icon.png"> 
 </div>
 <div class=leftANE>
 Description 
 </div>
 <div class=middleANE>
 <textarea rows="4" cols="50">

</textarea> 
 </div>


<div class=rightANE>
 <img width="25" src="Help-icon.png"> 
</div>
<div class=leftANE>
E-mail<br><br>Phone
</div>
 <div class=middleANE>
<input type="text">
<br> OR <BR>
<input type="text">
</div>
<input type="submit" value="SUBMIT">

Agreed with @Jace; this is a job for tables if I've ever seen one... — tckmn, Jan 19 '14 at 18:04
@DoorknobofSnow This is not a job for tables. Tables are for tabular data. This is not tabular data. — kleinfreund, Jan 19 '14 at 18:07
@kleinfreund There is nothing wrong with using a `table` _inside_ a `form` (or vice versa). A `table` is used for tabular data, sure, but form elements _can be used as_ tabular data in a way, they're just dynamic opposed to static. I better explained this [here](http://stackoverflow.com/questions/19569396/is-this-a-table/19569730#19569730). — Jace Cotton, Jan 19 '14 at 18:08
Are you telling me a input with a label makes a form tabular data? I disagree. After all this is a layout issue. @DoorknobofSnow You can draw some borders over all elements on a page. I'm not impressed. — kleinfreund, Jan 19 '14 at 18:14
The reason I don't want to use tables because it gives screen reader users the wrong idea. — RJay, Jan 19 '14 at 18:14
@kleinfreund Yes, I can draw random borders over any element, in fact I can have JS do it for me `$('*').css('border','1px solid black')`, but in this context tables are what is needed. This is clearly a grid with specific elements spanning specific lengths and specific sizes, and it would be much easier and cleaner to implement this with a table than with some `div`-ridden tableless design. Just because something isn't data doesn't mean you can't use a table for it. — tckmn, Jan 19 '14 at 18:17
@DoorknobofSnow We should avoid discussing here. It's offtopic. — kleinfreund, Jan 19 '14 at 18:18
@kleinfreund A table is basically (usually) saying "take this - under this circumstance - match it with this". The same with a `form`, "take this label - match it to this value - send this __data__ on submit." I like to think of a classic `form` as a dynamic, changeable `table`, that, once sent to the server, is then _your_ classic definition of a table (static, not changeable). — Jace Cotton, Jan 19 '14 at 18:19

agconti · Answer 1 · 2014-01-19T18:17:16.730

1

Your using floats. so you need a clearfix.

Try adding group to the div's your floating:

.group:after {
  content: "";
  display: table;
  clear: both;
}

your example fixed with .group : http://jsfiddle.net/agconti/YvQEs/

Adding a clearfix is the best practice way to do it. You can add this class to any element that you're floating to solve similar issues in the future. Additionally the link above will tell you all you need to know about how to use it.

Also, you need to wrap your class names with quotes like class="right" instead of class=right for the classes to apply.

edited Jan 19 '14 at 18:17

answered Jan 19 '14 at 18:02

agconti

17,780
15
80
114

ohh cool that does look better! what other steps do i need to take to make the form look like my photoshop image: http://i.stack.imgur.com/sO3Cr.jpg – RJay Jan 19 '14 at 18:17
You'll need to add `box-sizing:border-box;` to get the elements to respond like you expect. check this http://jsfiddle.net/agconti/YvQEs/4/. after that just add the appropriate padding and you should be all set. – agconti Jan 19 '14 at 18:22
thank you for your help! you have not answered the question i posted (i mean that in a respectful way). the end result i am trying to get is this picture --> http://i.stack.imgur.com/sO3Cr.jpg i'm still fighting with the code but can't get it the way i'd like. any chance you could please provide more of your expertise? – RJay Jan 19 '14 at 20:28

score 0 · Answer 2 · answered Jan 19 '14 at 18:15

0

clear add clear right on class .rightANE

.rightANE {
float: right;
width: 30px;
outline: 1px solid #8191a6;
clear: right; 
}

answered Jan 19 '14 at 18:15

Rajnish

94
2
2
10

that improved it a little. can you please provide more guidance so the form looks like this: http://i.stack.imgur.com/sO3Cr.jpg – RJay Jan 19 '14 at 21:01
sure try this one:
Name:
– Rajnish Jan 20 '14 at 05:56

Form Coming Out Wierd in HTML/CSS

2 Answers2