Floating Form on Contact Page (Table is not working) - html

Question

I have problem with floating on contact page. Here is the following code.
HTML
<div class="contact">
<form class="form" method="post" action="">
<table>
<tr>
<td class="contact-firstcol">
<label for="name">Name</label>
</td>
<td class="contact-secondcol">:</td>
<td class="contact-thirdcol">
<input type="text" name="name" id="name" />
</td>
</tr>
<tr>
<td class="contact-firstcol">
<label for="email">Email</label>
</td>
<td class="contact-secondcol">:</td>
<td class="contact-thirdcol">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="contact-firstcol">
<label for="phone">Phone</label>
</td>
<td class="contact-secondcol">:</td>
<td class="contact-thirdcol">
<input type="text" name="phone" id="phone" />
</td>
</tr>
<tr>
<td class="contact-firstcol">
<label for="topic">Topic</label>
</td>
<td class="contact-secondcol">:</td>
<td class="contact-thirdcol">
<div class="styled-select select">
<select class="dropdown">
<option value="generalQuestion">General Question</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="contact-firstcol">
<label for="message">Message</label>
</td>
<td class="contact-secondcol">:</td>
<td class="contact-thirdcol">
<textarea id="message" name="message"></textarea>
</td>
</tr>
<tr>
<td class="contact-firstcol"></td>
<td class="contact-secondcol"></td>
<td class="contact-thirdcol">
<input type="reset" name="reset" value="CLEAR" />
<input type="submit" name="submit" value="SUBMIT" />
</td>
</tr>
<table>
</form>
</div>
<div class="aside">
<p>Email</p>
<p>Telephone</p>
<p>Address</p>
</div>
CSS
.contact {
float:left;
width:68%;
margin:20px 0 0 0;
padding:10px;
}
.aside {
float:left;
width:27%;
margin:20px 0 0 0;
padding:10px;
background-color:#CECECE;
}
#home-contact p {
font-family:'alegreya_sansregular';
letter-spacing:0;
}
table {
line-height:30px;
margin:20px;
display:inline-block;
}
td {
vertical-align:top;
}
.contact-firstcol {
font-family:'alegreya_sansregular';
width:100px;
font-size:17px;
color:#999;
}
.contact-secondcol {
font-family:'alegreya_sansregular';
width:20px;
text-align:center;
font-size:17px;
color:#999;
}
.contact-thirdcol {
width:300px;
color:#999;
}
.form {
margin-top:20px;
}
.form input, textarea {
padding: 5px;
margin: 2px 5px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 12px/100% Verdana, Tahoma, sans-serif;
width: 280px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
max-height:300px;
resize:none;
}
.form textarea {
width:280px;
max-width:280px;
height:100px;
max-height:100px;
line-height:150%;
}
input[type="submit"], input[type="reset"] {
color:#FFF;
background:rgba(100, 100, 100, 1);
border:none;
width:100px;
letter-spacing: 1px;
font-family:'alegreya_sansregular', sans-serif;
font-size:17px;
cursor:pointer;
}
input[type="submit"]:hover, input[type="reset"]:hover {
background:rgba(100, 100, 100, 0.5);
-o-transition:.5s;
transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
}
.styled-select select {
width:293px;
padding-top:2px;
color:#999;
margin-left:5px;
border:1px solid #CCC;
height:28px;
font-size:15px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(../images/arrowdown.png) no-repeat right #ddd;
border: 1px solid #ccc;
}
Can you help how to fix this?
I want to make .contact and .aside float left very well. But it turned out that .aside didn't float at all, and stay at .contact.
I tried to removed one by one and I spotted after I removed table tag, it's working well. But as soon as I insert table tag, it didn't work at all..
And here is JSFIDDLE for you to understand more clearly.
Thanks! Looking forward to hear from you!

Answer 1

IF you resize the window on your jfiddle to allow for more space on the actual display you'll see that if you make it big enough it will float left as you expect. I think the issue is the widths you have set as if there is not enough room. If there is not enough room for an element to float, it will be placed below the other element or "wrap to the next line" as it were.
edit: Props to pankaj for noticing that yout table closing tag was missing the / (</table>) for cleanliness, though it Shoudln't have affected the div floats.

Answer 2

There was a small typo in the code that you shared. The closing tag of table wasn't proper. Check that.
Also, since you have given width in %age along with some padding for both .aside and .contact, it is messing with the calculation.
If I remove the padding from both .aside(32% width) and .contact(68% width), the divs are coming side by side. You can create another internal div to give proper padding.
Updated your jsfiddle link - http://jsfiddle.net/28CEE/1/
Here is the modified css:
.contact {
float:left;
width:68%;
margin:20px 0 0 0;
}
.aside {
float:left;
width:32%;
margin:20px 0 0 0;
background-color:#CECECE;
}

Answer 3

Be sure to close your </table> in your fiddle. You shouldn't need to change the display property of a table (you have it set to inline-block). As well, you might check your padding properties so they are percentage based (so they match your width units). You could also change the asides float to right.

Answer 4

You can try like this: LINK
HTML:
<div class="aside">
<p>Email</p>
<p>Telephone</p>
<p>Address</p>
</div>
<div class="contact">... </div>
Suppose if you want to float "aside" to right... use float:right instead of left

Answer 5

add css class
.form {
width: 68%;
float: left;
}
set width for contact like (width: 88%;)
close table tag </table>, set a active after form
<div class="contact">
<form class="form" method="post" action="">
<table>
<tr>
<td class="contact-firstcol"> <label for="name">Name</label> </td>
<td class="contact-secondcol"> : </td>
<td class="contact-thirdcol"> <input type="text" name="name" id="name" /> </td>
</tr>
<tr>
<td class="contact-firstcol"> <label for="email">Email</label> </td>
<td class="contact-secondcol"> : </td>
<td class="contact-thirdcol"> <input type="text" name="email" id="email" /> </td>
</tr>
<tr>
<td class="contact-firstcol"> <label for="phone">Phone</label> </td>
<td class="contact-secondcol"> : </td>
<td class="contact-thirdcol"> <input type="text" name="phone" id="phone" /> </td>
</tr>
<tr>
<td class="contact-firstcol"> <label for="topic">Topic</label> </td>
<td class="contact-secondcol"> : </td>
<td class="contact-thirdcol">
<div class="styled-select select">
<select class="dropdown">
<option value="generalQuestion"> General Question </option>
</select>
</div>
</td>
</tr>
<tr>
<td class="contact-firstcol"> <label for="message">Message</label> </td>
<td class="contact-secondcol"> : </td>
<td class="contact-thirdcol"> <textarea id="message" name="message"></textarea> </td>
</tr>
<tr>
<td class="contact-firstcol"></td>
<td class="contact-secondcol"></td>
<td class="contact-thirdcol"> <input type="reset" name="reset" value="CLEAR" /> <input type="submit" name="submit" value="SUBMIT" /> </td>
</tr>
</table>
</form>
<div class="aside">
<p> Email </p>
<p> Telephone </p>
<p> Address </p>
</div>
</div>