Keep text field and button inside box - html

Question

I've got a simple problem that I swear I've done a hundred times but I guess I need another pair of eyes.
I have a table, enter email text field and an add-email button all in a box. When I add more emails to the table it pushes out the text field and button outside of the box. The text field and button need to be side by side.
<div class="cc_halfblock">
<div class="dropshadow">
<div class="dropshadow-heading">
Heading
</div>
<form id="emailform" name="emailform" method="POST">
<table class="cc_table">
<tbody>
<tr>
<td>
foo#bar.com
</td>
<td>
<button class="deletebutton cc_icon_button" name="delete_email"
value="Delete" title="Delete this email"
</button>
<input type="hidden" name="email_address" value="" />
</td>
</tr>
...
</tbody>
</table>
</form>
<div class="cc_margintop">
<form id="addemailform" name="addemailform" method="POST">
<div class="cc_separator">
<input type="text" size="24" maxlength="64" name="add_email" placeholder="Enter email" id="add_email" />
</div>
<div class="cc_separator">
<button class="addbutton cc_button_enable pull-right" name="submitemail">Add Email</button>
</div>
<div id="cc_emailerrors"></div>
</form>
</div>
</div>
</div>
CSS:
.cc_button_enable {
margin-bottom: 5px;
float: left;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border: 1px solid #999;
cursor: pointer;
display: inline-block;
line-height: normal;
margin-right: 0.1em;
overflow: visible;
padding: 0;
position: relative;
text-align: center;
vertical-align: middle;
padding: 0.4em 1em;
font-family: Lucida Grande,Lucida Sans Unicode,Arial,Verdana,sans-serif;
font-size: 1.1em;
}
.dropshadow-heading {
background-color: #cccccc;
color: #28292A;
font-size: 22px;
padding: 10px 15px;
text-transform: uppercase;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
font-family: 'Open Sans', sans-serif;
}
.dropshadow-body {
padding: 1px 15px 15px 15px;
font-family: 'Open Sans', sans-serif;
}
.dropshadow {
font-family: 'Open Sans', sans-serif;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
min-height: 200px;
margin-left:15px;
margin-bottom:15px;
background-color:#ffffff;
border: 1px solid #CCCCCC;
}
.cc_table {
border-collapse: collapse;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
table-layout: auto;
text-align: left;
white-space: nowrap;
/* display:inline-block; */
width: 100%;
}
.cc_table th
{
background: none repeat scroll 0 0 rgb(230, 230, 230);
border-bottom: 1px solid #2B3D61;
border-top: 2px solid white;
color: rgb(165, 165, 165);
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.cc_table td {
background: none repeat scroll 0 0 #ffffff;
border-bottom: 1px solid #2B3D61;
border-top: 1px solid transparent;
color: #333333;
padding: 8px;
}
.cc_table tr:hover td {
background: none repeat scroll 0 0 #a8cb17;
color: #333399;
}
/* Used for spacing between form fields and buttons */
.cc_separator {
float: left;
margin-left: 10px;
}
/* generic spacing for divs on top */
.cc_margintop {
margin-top: 25px;
}
#addemailform label.error {
color: red;
display: block;
}
/* generic float left */
.cc_floatleft {
float: left;
}
/* blocks used for main content */
.cc_halfblock {
width:45%;
float: left;
margin-left: 20px;
min-height: 1px;
}
Fiddle to play with: http://jsfiddle.net/rkkw6uvg/1/

Answer 1

You have some floating elements inside .cc_margintop, so they'll break their parents bouds and cause a mess.
You need to clear those floats, so here are some possible solutions depending on your requirements:
add a overflow:hidden rule on .cc_margintop
use a good old clearfix method on .cc_margintop like so:
Check out the solution and the clearfix bellow:
.cc_margintop:after{
content: '';
display: table;
clear: both;
}
.cc_button_enable {
margin-bottom: 5px;
float: left;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border: 1px solid #999;
cursor: pointer;
display: inline-block;
line-height: normal;
margin-right: 0.1em;
overflow: visible;
padding: 0;
position: relative;
text-align: center;
vertical-align: middle;
padding: 0.4em 1em;
font-family: Lucida Grande,Lucida Sans Unicode,Arial,Verdana,sans-serif;
font-size: 1.1em;
}
.dropshadow-heading {
background-color: #cccccc;
color: #28292A;
font-size: 22px;
padding: 10px 15px;
text-transform: uppercase;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
font-family: 'Open Sans', sans-serif;
}
.dropshadow-body {
padding: 1px 15px 15px 15px;
font-family: 'Open Sans', sans-serif;
}
.dropshadow {
font-family: 'Open Sans', sans-serif;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
min-height: 200px;
margin-left:15px;
margin-bottom:15px;
background-color:#ffffff;
border: 1px solid #CCCCCC;
}
.cc_table {
border-collapse: collapse;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
table-layout: auto;
text-align: left;
white-space: nowrap;
/* display:inline-block; */
width: 100%;
}
.cc_table th
{
background: none repeat scroll 0 0 rgb(230, 230, 230);
border-bottom: 1px solid #2B3D61;
border-top: 2px solid white;
color: rgb(165, 165, 165);
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.cc_table td {
background: none repeat scroll 0 0 #ffffff;
border-bottom: 1px solid #2B3D61;
border-top: 1px solid transparent;
color: #333333;
padding: 8px;
}
.cc_table tr:hover td {
background: none repeat scroll 0 0 #a8cb17;
color: #333399;
}
/* Used for spacing between form fields and buttons */
.cc_separator {
float: left;
margin-left: 10px;
}
/* generic spacing for divs on top */
.cc_margintop {
margin-top: 25px;
overflow: hidden;/*clear those pesky floats*/
}
#addemailform label.error {
color: red;
display: block;
}
/* generic float left */
.cc_floatleft {
float: left;
}
/* blocks used for main content */
.cc_halfblock {
width:45%;
float: left;
margin-left: 20px;
min-height: 1px;
}
<div class="cc_halfblock">
<div class="dropshadow">
<div class="dropshadow-heading">
Heading
</div>
<form id="emailform" name="emailform" method="POST">
<table class="cc_table">
<tbody>
<tr>
<td>
foo#bar.com
</td>
<td>
<button class="deletebutton cc_icon_button" name="delete_email"
value="Delete" title="Delete this email"
</button>
<input type="hidden" name="email_address" value="" />
</td>
</tr>
<tr>
<td>
foo1#bar.com
</td>
<td>
<button class="deletebutton cc_icon_button" name="delete_email"
value="Delete" title="Delete this email"
</button>
<input type="hidden" name="email_address" value="" />
</td>
</tr>
<tr>
<td>
foo2#bar.com
</td>
<td>
<button class="deletebutton cc_icon_button" name="delete_email"
value="Delete" title="Delete this email"
</button>
<input type="hidden" name="email_address" value="" />
</td>
</tr>
<tr>
<td>
foo3#bar.com
</td>
<td>
<button class="deletebutton cc_icon_button" name="delete_email"
value="Delete" title="Delete this email"
</button>
<input type="hidden" name="email_address" value="" />
</td>
</tr>
<tr>
<td>
foo4#bar.com
</td>
<td>
<button class="deletebutton cc_icon_button" name="delete_email"
value="Delete" title="Delete this email"
</button>
<input type="hidden" name="email_address" value="" />
</td>
</tr>
</tbody>
</table>
</form>
<div class="cc_margintop">
<form id="addemailform" name="addemailform" method="POST">
<div class="cc_separator">
<input type="text" size="24" maxlength="64" name="add_email" placeholder="Enter email" id="add_email" />
</div>
<div class="cc_separator">
<button class="addbutton cc_button_enable pull-right" name="submitemail">Add Email</button>
</div>
<div id="cc_emailerrors"></div>
</form>
</div>
</div>
</div>

Answer 2

Your Answer: http://jsfiddle.net/rkkw6uvg/2/
I took out two floats and didn't even need to clear anything.
First float I took out was in this class: .cc_button_enable
Second: In the class: .cc_separator

Answer 3

See the below code.
Tag <input type='button' /> is self closing, don't use <button></button>
Pay attention on the class dropshadow. I added clear: both; and display: inline-block; to solve your specific problem.
.cc_button_enable {
margin-bottom: 5px;
float: left;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border: 1px solid #999;
cursor: pointer;
display: inline-block;
line-height: normal;
margin-right: 0.1em;
overflow: visible;
padding: 0;
position: relative;
text-align: center;
vertical-align: middle;
padding: 0.4em 1em;
font-family: Lucida Grande,Lucida Sans Unicode,Arial,Verdana,sans-serif;
font-size: 1.1em;
}
.dropshadow-heading {
background-color: #cccccc;
color: #28292A;
font-size: 22px;
padding: 10px 15px;
text-transform: uppercase;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
font-family: 'Open Sans', sans-serif;
}
.dropshadow-body {
padding: 1px 15px 15px 15px;
font-family: 'Open Sans', sans-serif;
}
.dropshadow {
clear: both;
display: inline-block;
font-family: 'Open Sans', sans-serif;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
/* min-height: 290px; */
margin-left:15px;
margin-bottom:15px;
background-color:#ffffff;
border: 1px solid #CCCCCC;
}
.cc_table {
border-collapse: collapse;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
table-layout: auto;
text-align: left;
white-space: nowrap;
/* display:inline-block; */
width: 100%;
}
.cc_table th
{
background: none repeat scroll 0 0 rgb(230, 230, 230);
border-bottom: 1px solid #2B3D61;
border-top: 2px solid white;
color: rgb(165, 165, 165);
font-size: 14px;
font-weight: normal;
padding: 8px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.cc_table td {
background: none repeat scroll 0 0 #ffffff;
border-bottom: 1px solid #2B3D61;
border-top: 1px solid transparent;
color: #333333;
padding: 8px;
}
.cc_table tr:hover td {
background: none repeat scroll 0 0 #a8cb17;
color: #333399;
}
/* Used for spacing between form fields and buttons */
.cc_separator {
float: left;
margin-left: 10px;
}
/* generic spacing for divs on top */
.cc_margintop {
margin-top: 25px;
}
#addemailform label.error {
color: red;
display: block;
}
/* generic float left */
.cc_floatleft {
float: left;
}
/* blocks used for main content */
.cc_halfblock {
width:45%;
float: left;
margin-left: 20px;
min-height: 1px;
}
<div class="cc_halfblock">
<div class="dropshadow">
<div class="dropshadow-heading">
Heading
</div>
<form id="emailform" name="emailform" method="POST">
<table class="cc_table">
<tr>
<td>foo#bar.com</td>
<td>
<button class="deletebutton cc_icon_button" name="delete_email" value="Delete" title="Delete this email" />
<input type="hidden" name="email_address" value="" />
</td>
</tr>
<tr>
<td>foo1#bar.com</td>
<td>
<button class="deletebutton cc_icon_button" name="delete_email" value="Delete" title="Delete this email" />
<input type="hidden" name="email_address" value="" />
</td>
</tr>
<tr>
<td>foo2#bar.com</td>
<td>
<button class="deletebutton cc_icon_button" name="delete_email" value="Delete" title="Delete this email" />
<input type="hidden" name="email_address" value="" />
</td>
</tr>
<tr>
<td>foo3#bar.com</td>
<td>
<button class="deletebutton cc_icon_button" name="delete_email" value="Delete" title="Delete this email" />
<input type="hidden" name="email_address" value="" />
</td>
</tr>
<tr>
<td>foo4#bar.com</td>
<td>
<button class="deletebutton cc_icon_button" name="delete_email" value="Delete" title="Delete this email" />
<input type="hidden" name="email_address" value="" />
</td>
</tr>
</table>
</form>
<div class="cc_margintop">
<form id="addemailform" name="addemailform" method="POST">
<div class="cc_separator">
<input type="text" size="24" maxlength="64" name="add_email" placeholder="Enter email" id="add_email" />
</div>
<div class="cc_separator">
<div class="addbutton cc_button_enable pull-right" name="submitemail">Add Email</div>
</div>
<div id="cc_emailerrors"></div>
</form>
</div>
</div>
</div>