HTML 5 Button wont align to the far right of text area - html

Question

How can I float the button all the way right?
I've tried everyhting to float it right, and change the position to absolute, but I have had no luck pushing the button to the right edge of the text area.
http://jsfiddle.net/hz0fo895/
#counter { float:left; position:relative; margin-left:20px; margin-top:5px;}
.stringsharewrapper { width:100%; height:auto; margin-top:10px; }
.writestring { width:90%; left:20px; height:80px; position:relative; margin-top:10px; }
.stringtitle { color:black; font-family:arial; font-family: Helvetica, Arial, "Sans Serif"; font-size:20px; font-weight:bold; margin-left:20px; margin-top:5px;}
/*----------Filter Button 1 ------------*/
#stringbutton2[type=checkbox]
{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[for="stringbutton2"]
{
background: #EEE;
background: linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -moz-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -ms-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -o-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFBF00),color-stop(100%,#FE9A2E));
background: -webkit-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: inset 0px 0px 1px 0px #FFF;
color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBF00',endColorstr='#FE9A2E',GradientType=0);
font-family: Helvetica,Arial,"Sans Serif";
font-size: 13px;
font-weight: bold;
left: 5%;
moz-border-radius: 5px;
moz-box-shadow: inset 0px 0px 1px 0px #FFF;
padding: 0;
padding: 6px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px #DDD;
top: 4px;
webkit-border-radius: 5px;
webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
width: 100px;
}
[for="stringbutton2"]:hover
{
background: #CCC;
background: -moz-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -ms-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -o-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0B2F3A),color-stop(100%,#100719));
background: -webkit-linear-gradient(top,#0B2F3A 0%,#100719 100%);
border-color: #BBB;
color: #FFFFFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B2F3A',endColorstr='#100719',GradientType=0);
font-weight: bold;
}
[for="stringbutton2"] span.filterswitch:last-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked
{
color: #FFA317;
}
#stringbutton2[type=checkbox]:checked~ .filtercontent
{
display: block;
visibility: visible;
width: 100%;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:first-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:last-of-type
{
color: #3CC;
display: block;
visibility: visible;
}
/*-------------Filter Button Container---------------*/
.submitcontainer
{
position: relative;
width: 300px; top:0; float:right;
}
<div class="sharepagetab sharewrapper activeshare" id="ashare">
<div class="allshares">
<div class="shares">
<div class='stringsharewrapper'>
<span class="stringtitle">Write Something</span><br />
<textarea class="writestring" onKeyUp="textCounter2(this,'counter',150);"></textarea>
<br />
<input disabled class="charInput" size="3" value="150" id="counter">
<!----------Write button------------>
<div class="submitcontainer">
<input onclick="toggleContent()" type="checkbox" id="stringbutton2" class="cfilterbutton" role="button">
<label for="stringbutton2" onclick="">
<span class="filterswitch">Post</span>
<span class="filterswitch">Post</span>
</label>
</div><!----End Filtercontainer------->
</div>

Answer 1

Remove the width on submitcontainer. That will cause the Post button to float all the way right. This however will not cause it to line up with your textbox as the textbox is autosizing. You probably want another div around the "Write Something" text and text input with a specified width that matches the width of your submitcontainer div if you want things to work as you desire.

Answer 2

Quick fix. Use a negative value of margin-right to fix it.
#counter { float:left; position:relative; margin-left:20px; margin-top:5px;}
.stringsharewrapper { width:100%; height:auto; margin-top:10px; }
.writestring { width:90%; left:20px; height:80px; position:relative; margin-top:10px; }
.stringtitle { color:black; font-family:arial; font-family: Helvetica, Arial, "Sans Serif"; font-size:20px; font-weight:bold; margin-left:20px; margin-top:5px;}
/*----------Filter Button 1 ------------*/
#stringbutton2[type=checkbox]
{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[for="stringbutton2"]
{
background: #EEE;
background: linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -moz-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -ms-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -o-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFBF00),color-stop(100%,#FE9A2E));
background: -webkit-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: inset 0px 0px 1px 0px #FFF;
color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBF00',endColorstr='#FE9A2E',GradientType=0);
font-family: Helvetica,Arial,"Sans Serif";
font-size: 13px;
font-weight: bold;
left: 5%;
moz-border-radius: 5px;
moz-box-shadow: inset 0px 0px 1px 0px #FFF;
padding: 0;
padding: 6px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px #DDD;
top: 4px;
webkit-border-radius: 5px;
webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
width: 100px;
}
[for="stringbutton2"]:hover
{
background: #CCC;
background: -moz-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -ms-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -o-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0B2F3A),color-stop(100%,#100719));
background: -webkit-linear-gradient(top,#0B2F3A 0%,#100719 100%);
border-color: #BBB;
color: #FFFFFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B2F3A',endColorstr='#100719',GradientType=0);
font-weight: bold;
}
[for="stringbutton2"] span.filterswitch:last-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked
{
color: #FFA317;
}
#stringbutton2[type=checkbox]:checked~ .filtercontent
{
display: block;
visibility: visible;
width: 100%;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:first-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:last-of-type
{
color: #3CC;
display: block;
visibility: visible;
}
.submitcontainer
{ position: relative; width: 300px; top:0; float:right!important; margin-right: -135px;
}
<div class="sharepagetab sharewrapper activeshare" id="ashare">
<div class="allshares">
<div class="shares">
<div class='stringsharewrapper'>
<span class="stringtitle">Write Something</span><br />
<textarea class="writestring" onKeyUp="textCounter2(this,'counter',150);"></textarea>
<br />
<input disabled class="charInput" size="3" value="150" id="counter">
<!----------Write button------------>
<div class="submitcontainer">
<input onclick="toggleContent()" type="checkbox" id="stringbutton2" class="cfilterbutton" role="button">
<label for="stringbutton2" onclick="">
<span class="filterswitch">Post</span>
<span class="filterswitch">Post</span>
</label>
</div><!----End Filtercontainer------->
</div>

Answer 3

I found the answer following some of the tips of Devon posted and expanding on the concept. What I did was put a wrapper .stringclassic with 90% width and placed all the children inside and floated them accordingly. Check out my code for more informaton or the fiddle. Hope I can help someone else lookin for this information.
Thank you All!
http://jsfiddle.net/L0f48606/1/
<div class="sharepagetab sharewrapper activeshare" id="ashare">
<div class="allshares">
<div class="shares">
<div class='stringsharewrapper'>
<div class="stringclassic">
<span class="stringtitle">Write Something</span> <br />
<textarea class="writestring" onKeyUp="textCounter2(this,'counter',150);"></textarea>
<br />
<input disabled class="charInput" size="3" value="150" id="counter">
<!----------Write button------------>
<div class="submitcontainer">
<input onclick="toggleContent()" type="checkbox" id="stringbutton2" class="cfilterbutton" role="button">
<label for="stringbutton2" onclick="">
<span class="filterswitch">Post</span>
<span class="filterswitch">Post</span>
</label>
</div><!----End Filtercontainer------->
</div>
</div>
</div>
</div>
</div>
And the CSS:
#counter { float:left; position:relative; margin-left:20px; margin-top:5px;}
.stringsharewrapper { width:100%; height:auto; margin-top:10px; background:pink; position:relative;}
.writestring { width:90%; left:20px; height:80px; position:relative; margin-top:10px; }
.stringtitle { color:black; font-family:arial; font-family: Helvetica, Arial, "Sans Serif"; font-size:20px; font-weight:bold; float:left; position:relative; margin-left:20px; margin-top:5px;}
/*----------Filter Button 1 ------------*/
#stringbutton2[type=checkbox]
{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[for="stringbutton2"]
{
background: #EEE;
background: linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -moz-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -ms-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -o-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFBF00),color-stop(100%,#FE9A2E));
background: -webkit-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: inset 0px 0px 1px 0px #FFF;
color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBF00',endColorstr='#FE9A2E',GradientType=0);
font-family: Helvetica,Arial,"Sans Serif";
font-size: 13px;
font-weight: bold;
left: 5%;
moz-border-radius: 5px;
moz-box-shadow: inset 0px 0px 1px 0px #FFF;
padding: 0;
padding: 6px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px #DDD;
top: 4px;
webkit-border-radius: 5px;
webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
width: 100px;
}
[for="stringbutton2"]:hover
{
background: #CCC;
background: -moz-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -ms-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -o-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0B2F3A),color-stop(100%,#100719));
background: -webkit-linear-gradient(top,#0B2F3A 0%,#100719 100%);
border-color: #BBB;
color: #FFFFFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B2F3A',endColorstr='#100719',GradientType=0);
font-weight: bold;
}
[for="stringbutton2"] span.filterswitch:last-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked
{
color: #FFA317;
}
#stringbutton2[type=checkbox]:checked~ .filtercontent
{
display: block;
visibility: visible;
width: 100%;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:first-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:last-of-type
{
color: #3CC;
display: block;
visibility: visible;
}
/*-------------Filter Button Container---------------*/
.stringclassic { width:90%; left:20px; height:80px; position:relative; margin-top:1px; float:left; }
.writestring { width:100%; height:80px; position:relative; margin-top:10px; }
.submitcontainer
{
position: relative; margin-right:90px;
top:0; float:right; display:inline-block;
}