Recently, I've been trying to align my two text boxes for my website, but I couldn't figure it out. Do understand that I'm not knowledgeable in CSS like you are, but I need to know what to change so that they won't show up on the far left and unaligned. This is what it looks like on my website for some reason:
http://i.imgur.com/zkxPBEl.png
As you can see, it doesn't align properly, even when I try to center it using an online editor. Please help! Thanks!
<!-- AWeber Web Form Generator 3.0.1 --><form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;"><input name="meta_web_form_id" type="hidden" value="604218668" /> <input name="meta_split_id" type="hidden" value="" /> <input name="listname" type="hidden" value="awlist4661276" /> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true" /> <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /></div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element"><label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534028" class="text" style="width: 200px;" tabindex="500" name="name" type="text" value="First Name..." /></div>
</div>
<div class="af-element" style="text-align: center;"><label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534029" class="text" style="width: 460px;" tabindex="501" name="email" type="text" value="Best Email..." /></div>
</div>
<div class="af-element buttonContainer" style="text-align: left;"><input id="af-submit-image-604218668" class="image" style="background: none; max-width: 100%;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
<div class="af-clear">We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<script type="text/javascript">// <![CDATA[
// Special handling for facebook iOS since it cannot open new windows
(function() {
if (navigator.userAgent.indexOf('FBIOS') !== -1 || navigator.userAgent.indexOf('Twitter for iPhone') !== -1) {
document.getElementById('af-form-604218668').parentElement.removeAttribute('target');
}
})();
// ]]></script>
<script type="text/javascript">// <![CDATA[
(function() {
var IE = /*#cc_on!#*/false;
if (!IE) { return; }
if (document.compatMode && document.compatMode == 'BackCompat') {
if (document.getElementById("af-form-604218668")) {
document.getElementById("af-form-604218668").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-604218668")) {
document.getElementById("af-body-604218668").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-604218668")) {
document.getElementById("af-header-604218668").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-604218668")) {
document.getElementById("af-footer-604218668").className = "af-footer af-quirksMode";
}
}
})();
// ]]></script>
<!-- /AWeber Web Form Generator 3.0.1 -->
Your input Tags have different width settings.
style="width: 200px;" and style="width: 460px;"
Make these the same value.
I believe this is the solution your looking for? Your looking to have the name input field centre aligned with the next field. If you set the position to relative and set the left position to ((email width - name width) / 2) You'll end up with an equal distance on the left and right making it centred
So your layout becomes this
130px <--- 200px ---> 130px
<------------ 460px ------------>
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;"><input name="meta_web_form_id" type="hidden" value="604218668" /> <input name="meta_split_id" type="hidden" value="" /> <input name="listname" type="hidden" value="awlist4661276" /> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true" /> <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /></div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element"><label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534028" class="text" style="width: 200px; position:relative;left:130px;" tabindex="500" name="name" type="text" value="First Name..." /></div>
</div>
<div class="af-element" style="text-align: center;"><label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534029" class="text" style="width: 460px;" tabindex="501" name="email" type="text" value="Best Email..." /></div>
</div>
<div class="af-element buttonContainer" style="text-align: left;"><input id="af-submit-image-604218668" class="image" style="background: none; max-width: 100%;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
<div class="af-clear">We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
By adding style="margin: 0 0 0 13%;" to your form tag it will be centered properly. or if you want then you can change the amount if it is not centering then too.. I hope this will help you :)
<!-- AWeber Web Form Generator 3.0.1 --><form style="margin: 0 0 0 13%;" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;"><input name="meta_web_form_id" type="hidden" value="604218668" /> <input name="meta_split_id" type="hidden" value="" /> <input name="listname" type="hidden" value="awlist4661276" /> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true" /> <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /></div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element"><label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534028" class="text" style="width: 200px;" tabindex="500" name="name" type="text" value="First Name..." /></div>
</div>
<div class="af-element" style="text-align: center;"><label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534029" class="text" style="width: 460px;" tabindex="501" name="email" type="text" value="Best Email..." /></div>
</div>
<div class="af-element buttonContainer" style="text-align: left;"><input id="af-submit-image-604218668" class="image" style="background: none; max-width: 100%;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
<div class="af-clear">We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<script type="text/javascript">// <![CDATA[
// Special handling for facebook iOS since it cannot open new windows
(function() {
if (navigator.userAgent.indexOf('FBIOS') !== -1 || navigator.userAgent.indexOf('Twitter for iPhone') !== -1) {
document.getElementById('af-form-604218668').parentElement.removeAttribute('target');
}
})();
// ]]></script>
<script type="text/javascript">// <![CDATA[
(function() {
var IE = /*#cc_on!#*/false;
if (!IE) { return; }
if (document.compatMode && document.compatMode == 'BackCompat') {
if (document.getElementById("af-form-604218668")) {
document.getElementById("af-form-604218668").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-604218668")) {
document.getElementById("af-body-604218668").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-604218668")) {
document.getElementById("af-header-604218668").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-604218668")) {
document.getElementById("af-footer-604218668").className = "af-footer af-quirksMode";
}
}
})();
// ]]></script>
<!-- /AWeber Web Form Generator 3.0.1 -->
Make the container holding the div inline-block. And use "text-align:center" on the container holding that div. See code below. Hope it helps.
.af-form {
text-align: center;
}
.af-body {
margin: 0 auto;
display: inline-block;
}
.af-clear {
text-align: center;
}
<!-- AWeber Web Form Generator 3.0.1 --><form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;"><input name="meta_web_form_id" type="hidden" value="604218668" /> <input name="meta_split_id" type="hidden" value="" /> <input name="listname" type="hidden" value="awlist4661276" /> <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" name="redirect" type="hidden" value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true" /> <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> <input name="meta_message" type="hidden" value="1" /> <input name="meta_required" type="hidden" value="name,email" /> <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /></div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element"><label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534028" class="text" style="width: 200px;" tabindex="500" name="name" type="text" value="First Name..." /></div>
</div>
<div class="af-element" style="text-align: center;"><label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;"><input id="awf_field-90534029" class="text" style="width: 460px;" tabindex="501" name="email" type="text" value="Best Email..." /></div>
</div>
<div class="af-element buttonContainer" style="text-align: left;"><input id="af-submit-image-604218668" class="image" style="background: none; max-width: 100%;" tabindex="502" alt="Submit Form" name="submit" src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" type="image" />
<div class="af-clear">We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></div>
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<script type="text/javascript">// <![CDATA[
// Special handling for facebook iOS since it cannot open new windows
(function() {
if (navigator.userAgent.indexOf('FBIOS') !== -1 || navigator.userAgent.indexOf('Twitter for iPhone') !== -1) {
document.getElementById('af-form-604218668').parentElement.removeAttribute('target');
}
})();
// ]]></script>
<script type="text/javascript">// <![CDATA[
(function() {
var IE = /*#cc_on!#*/false;
if (!IE) { return; }
if (document.compatMode && document.compatMode == 'BackCompat') {
if (document.getElementById("af-form-604218668")) {
document.getElementById("af-form-604218668").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-604218668")) {
document.getElementById("af-body-604218668").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-604218668")) {
document.getElementById("af-header-604218668").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-604218668")) {
document.getElementById("af-footer-604218668").className = "af-footer af-quirksMode";
}
}
})();
// ]]></script>
<!-- /AWeber Web Form Generator 3.0.1 -->
Related
I have a form that is divided into two columns with floats. I want to make them "checkered". How can I use nth-child to achieve this? See the screenshot below to see what I mean. Here is my HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Grade Calculator
</title>
<style type="text/css">
.form-group {
padding: 15px;
width: 45%;
float: left;
}
.form-group:nth-child(3n+0){
background: #e4e4e4;
}
form {
margin: 25px auto;
border-width: 0px 1px;
border-style: solid;
border-color: #ccc;
width: 50%;
}
label {
width: 350px;
margin: 0;
padding: 0;
display: block;
}
input {
width: calc(100% - 20px);
margin: 15px 0px;
}
</style>
</head>
<body>
<form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Era4Q8Ttswx16Rg3XXwdNh7LuVHYalpdgKUCOJGwMcgBX7OP6eVRcScpUQ68BMteFlRltJ8L3vXUMx8wG+4DEf3Oi4RZcMfq/H6H7MbdpUbBLssudRCbS2QNV6vILQ9uBG64j4wb2CKGAAM2+aw+BYfCpxNSeloQ2BbcnUnOHjk=" />
</div>
<div>
<div class="form-group">
<span id="aOneActualLbl">Assignment 1</span>
<input name="aOneActualTxt" type="text" value="8" id="aOneActualTxt" />
<span id="aOnePossibleLbl">Possible</span>
<input name="aOnePossibleTxt" type="text" value="10" id="aOnePossibleTxt" />
</div>
<div class="form-group">
<span id="aTwoActualLbl">Assignment 2</span>
<input name="aTwoActualTxt" type="text" value="8" id="aTwoActualTxt" />
<span id="aTwoPossibleLbl">Possible</span>
<input name="aTwoPossibleTxt" type="text" value="10" id="aTwoPossibleTxt" />
</div>
<div class="form-group">
<span id="aThreeActualLbl">Assignment 3</span>
<input name="aThreeActualTxt" type="text" value="9" id="aThreeActualTxt" />
<span id="aThreePossibleLbl">Possible</span>
<input name="aThreePossibleTxt" type="text" value="10" id="aThreePossibleTxt" />
</div>
<div class="form-group">
<span id="aFourActualLbl">Assignment 4</span>
<input name="aFourActualTxt" type="text" value="9" id="aFourActualTxt" />
<span id="aFourPossibleLbl">Possible</span>
<input name="aFourPossibleTxt" type="text" value="10" id="aFourPossibleTxt" />
</div>
<div class="form-group">
<span id="aFiveActualLbl">Assignment 5</span>
<input name="aFiveActualTxt" type="text" value="8" id="aFiveActualTxt" />
<span id="aFivePossibleLbl">Possible</span>
<input name="aFivePossibleTxt" type="text" value="10" id="aFivePossibleTxt" />
</div>
<div class="form-group">
<span id="aSixActualLbl">Assignment 6</span>
<input name="aSixActualTxt" type="text" value="8" id="aSixActualTxt" />
<span id="aSixPossibleLbl">Possible</span>
<input name="aSixPossibleTxt" type="text" value="10" id="aSixPossibleTxt" />
</div>
<div class="form-group">
<span id="aSevenActualLbl">Assignment 7</span>
<input name="aSevenActualTxt" type="text" value="8" id="aSevenActualTxt" />
<span id="aSevenPossibleLbl">Possible</span>
<input name="aSevenPossibleTxt" type="text" value="10" id="aSevenPossibleTxt" />
</div>
<div class="form-group">
<span id="aEightActualLbl">Assignment 8</span>
<input name="aEightActualTxt" type="text" value="8" id="aEightActualTxt" />
<span id="aEightPossibleLbl">Possible</span>
<input name="aEightPossibleTxt" type="text" value="10" id="aEightPossibleTxt" />
</div>
<div class="form-group">
<span id="aNineActualLbl">Assignment 9</span>
<input name="aNineActualTxt" type="text" value="8" id="aNineActualTxt" />
<span id="aNinePossibleLbl">Possible</span>
<input name="aNinePossibleTxt" type="text" value="10" id="aNinePossibleTxt" />
</div>
<div class="form-group">
<span id="aTenActualLbl">Assignment 10</span>
<input name="aTenActualTxt" type="text" value="8" id="aTenActualTxt" />
<span id="aTenPossibleLbl">Possible</span>
<input name="aTenPossibleTxt" type="text" value="10" id="aTenPossibleTxt" />
</div>
<div class="form-group">
<input type="submit" name="runCalculation" value="Calculate Grade" id="runCalculation" />
<span id="currentGradeLbl">Your current grade is B</span>
</div>
</div>
In the screenshot below, I would like assignment 2, 3, 6, 7, and 10 to be grey to create the checker effect. Is this possible?
I was trying to work this out using a single formula but sometimes it's easy if you break them into multiple series.
2, 6, 10, 14, ... => 4n-2
3, 7, 11, 15, ... => 4n-1
So,
.form-group:nth-child(4n-2), .form-group:nth-child(4n-1){
background: #e4e4e4;
}
check this fiddle
I am little bit confused how to use Bootstrap CSS. I have two textboxes, a search button and image side to it. For fullscreen all elements should be in a row.
resizing screen, All elements should be one after another.
<div class="form-group" style="vertical-align: top; margin-right: 20px">
<label for="name" style="color: #eea236">
name:</label>
<input type="text" class="form-control" placeholder="name" name="name" />
</div>
<div class="form-group" style="vertical-align: top; margin-right: 20px">
<label for="organization" style="color: #eea236">
City:</label>
<input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px">
Search</button>
<img src="xx.jpg" />
Please help....
<form class="form-inline">
<div class="form-group">
<label for="name">Name:</</label>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group">
<label for="city">City:</</</label>
<input type="text" class="form-control" id="city" placeholder="City">
</div>
<button type="submit" class="btn btn-warning">Search</button>
<img class="img-responsive" src="xx.jpg" />
</form>
You could add in display:inline-block on both those form-group div's
<div class="form-group" style="vertical-align: top; margin-right: 20px; display:inline-block;">
<label for="name" style="color: #eea236">
name:</label>
<input type="text" class="form-control" placeholder="name" name="name" />
</div>
<div class="form-group" style="vertical-align: top; margin-right: 20px; display:inline-block;">
<label for="organization" style="color: #eea236">
City:</label>
<input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px">
Search</button>
<img src="xx.jpg" />
There is an image responsive class:
you can try adding:
<img class="img-responsive" src="xx.jpg" />
Try adding this to your code display: inline i.e, Replace your top line with this .
<div class="form-group" style="vertical-align: top; margin-right: 20px; display: inline">
You need to use display: inline-block; property.
<div class="form-group" style="display:inline-block; vertical-align: top; margin-right: 20px;">
<label for="name" style="color: #eea236">
name:</label>
<input type="text" class="form-control" placeholder="name" name="name" />
</div>
<div class="form-group" style="display:inline-block; vertical-align: top; margin-right: 20px;">
<label for="organization" style="color: #eea236">
City:</label>
<input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px">
Search</button>
<img src="xx.jpg" />
You don't have to add any inline css. There is a built-in feature in bootstrap that would position the text boxes, buttons, etc. side by side in one row.
Your form should be wrapped in a <form> tag.
<form class="form-inline" role="form">
*Your form groups here.*
</form>
That should make your form groups display inline, depending on the width of your browser. It should also be responsive as well.
<div class="form-group">
<label class="col-xs-2 control-label" style="color:eea236">name:/label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="name" name="name"/>
</div>
<label for="organization" style="color: #eea236">City:</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<div class="col-xs-3">
<button class="btn btn-warning" type="submit">Search</button>
</div> <img src="xx.jpg" />
</div>
Working on a form with Bootstrap CSS, have the form class as "form-inline", but for some reason, the form refuses to actually display inline.
Here's a fiddle, showing the problem:
http://jsfiddle.net/5wBzE/
Here's the HTML:
<iframe id="AweberFormSubmitFrame" style="display: none" name="AweberFormSubmitFrame" src="about:blank"></iframe>
<form id="before_header" target="AweberFormSubmitFrame" method="post" class="form-inline" action="http://www.aweber.com/scripts/addlead.pl">
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="2074084490" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="foreverjobless" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_f916c5c4ae42ade190efaef62fd11c16" />
<input type="hidden" name="meta_adtracking" value="FJ:_Header" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div class="af-element">
<div class="form-inline">
<input class="text form-control" id="awf_field-60198198" type="text" name="email" value="" tabindex="500" />
</div>
<div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<button name="submit" onClick="return _submit_form_header(this.form);" class="submit btn btn-primary btn-lg" type="submit" value="Submit" tabindex="501">Subscribe</button>
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;">
<img src="http://forms.aweber.com/form/displays.htm?id=TAzsLAwcLCycDA==" alt="" />
</div>
</form>
<div id="after_header" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>
Any tips or pointers in the right direction is appreciated!
Solved this by taking out the unnecessary aweber divs.
I have two divs nested inside another and no matter what I have tried I can't get the second nested div (bookmarklet-wrapper) to float beside the first(form-wrapper)? I thought maybe it was something to do with the widths but this didn't help and also tried using a "clearfix" but this still didn't help.
My HTML is as follows:
<div id="prof-wrapper">
<div id="editprofile-form-wrapper">
<div id="title">
<h1>Edit Profile</h1>
<p>This information appears on your personal user page</p>
</div><!--End of title-->
<div class="form-horizontal">
<?php if(isset($image)){echo $image;}?>
<div id="thumbs" style="width:300px"></div>
<form id="cropimage" method="post" enctype="multipart/form-data">
<fieldset class="control-group">
<label class="control-label" for="firstname">Firstname</label>
<div class="controls">
<input id="firstname" type="text" name="fname">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="lastname">Surname</label>
<div class="controls">
<input id="lastname" type="text" name="secound">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input id="email" type="text" name="email">
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="user_location">Location</label>
<div class="controls">
<input id="user_location" type="text" value="" name="user[location]">
<p>Where art thou?</p>
</div>
</fieldset>
<fieldset class="control-group">
<label class="control-label" for="bio">Bio</label>
<div id="user_description_box" class="controls">
<textarea id="bio" class="input-xlarge" name="bio" style="width: 243px; height: 122px;"></textarea>
<p class="bio-label">About yourself in<strong>160</strong>characters or less.</p>
</div>
</fieldset>
<div class="form-actions">
<button id="submitButton" class="btn primary-btn" type="submit" name="submit">Save changes</button>
</div>
</form>
<form id="cropimage" method="post" enctype="multipart/form-data">
<fieldset class="control-group">
<label class="control-label" for="photoimg">Profile photo upload</label>
<div id="user_description_box" class="controls">
<input id="photoimg" type="file" value="" name="photoimg">
<input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" />
<!--<p class="bio-label">About yourself in <strong>160</strong> characters or less.</p>-->
</div>
</fieldset>
<div class="form-actions">
<input type="submit" class="btn primary-btn" id="photoSubmit" name="submit" value="Photo Submit" />
</div>
</form>
</div><!--End of horizontal form-->
</div><!--End of form wrapper-->
<div class="clearfix"></div>
<!-----------------------------------------Start of bookmarklet-------------------------------------------------->
<div id="bookmarklet-wrapper">
<h1 id="welcometext">Welcome to <img src="images/logo_text.png" alt="NetSushi Logo" title="Net Sushi" id="instrustionlogo" width="100px"/></h1>
<h2 id="bminstructions">The Bookmarklet below should be dragged to your bookmarks bar so that you can share content with your friends on <!--<img src="images/logo_text.png" alt="NetSushi Logo" title="Net Sushi" id="instrustionlogo" width="100px"/>
<a style="text-decoration:none;
background:#25A6E1;
background:-moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
background:-webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:-ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background:linear-gradient(top,#25A6E1 0%,#188BC0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
padding:8px 13px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9;
position: relative;
top: 20px;"
href="javascript:
(function () {
function loadjscssfile(filename, filetype){
if (filetype=='js'){
var fileref=document.createElement('script');
fileref.setAttribute('type','text/javascript');
fileref.setAttribute('id','jsDoc');
fileref.setAttribute('src', filename);
}else if (filetype=='css'){
var fileref=document.createElement('link');
fileref.setAttribute('rel', 'stylesheet');
fileref.setAttribute('id', 'cssDoc');
fileref.setAttribute('type', 'text/css');
fileref.setAttribute('href', filename);
}
if (typeof fileref!='undefined')
document.getElementsByTagName('head')[0].appendChild(fileref);
}
var cssDoc = document.getElementById('cssDoc');
if (cssDoc == null){
loadjscssfile('http://www.netsushi.net/css/css/bookmarklet.css', 'css');
}
var jsDoc = document.getElementById('jsDoc');
if (jsDoc == null){
loadjscssfile('http://www.netsushi.net/js/bookmarklet.js', 'js');
}else{
if ($('#feeder_bm_main').is(':visible')){
$('#feeder_bm_main').hide();
}else{
$('#feeder_bm_main').show();
}
}
void(0)
}())
;"-->
>NetSushi</a>
</div><!--End of bookmarklet wrapper-->
</div><!--end of edit-page-content-->
I'm still unsure how to correctly format my CSS to post it but you can see exactly what is going on in this fiddle if you have a moment to help me out?
http://jsfiddle.net/DannyW86/3gMuP/
If you simply add float: left to your form-wrapper, it should work : http://jsfiddle.net/3gMuP/1/
You can also use display:inline-block; in the 2 divs you want to have next to each other.
This works for me:
#editprofile-form-wrapper {
width: 50%;
float: left;
}
I don't have any other CSS what-so-ever ... and the 2 columns now sit next to each other.
completely frustrated here with something that is probably so simple. I have a form and want the Zip and Zip+4 fields to be on the same line. For some reason nothing is lining up the way I've done it. I've spent the last 6 hours searching the web and trying various things (this latest was from this site) and nothing works. Can someone help me please? Thanks!
Here is my code:
<form>
<div style="float:left;">
<label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px" id="StrAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px" id="StrSecondaryAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput" style="width:200px" id="StrCity" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;"> </div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px" id="IntZip5" />
<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">
</div>
<div style="clear:both;"> </div>
<input type="button" class="button" value="Submit Form" />
</form>
Would this do the job for you? Please test it on multiple browsers
because it's only tested on FF 3.6, IE 7+
While the structure police are sure to pull me over for this, it is my considered opinion that using a table is the single most reliable way to line up elements in all browsers. Set the vertical-align:top and do what you need to do.
You can do something along this lines:
<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
label {
width: 300px !important;/* added important to override your inline styles*/
display: block !important;
text-align: right !important;
float: left;
}
</style>
</head>
<body>
<form>
<div style="float:left;">
<label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px" id="StrAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px" id="StrSecondaryAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput" style="width:200px" id="StrCity" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;"> </div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px" id="IntZip5" />
<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">
</div>
<div style="clear:both;"> </div>
<input type="button" class="button" value="Submit Form" />
</form>
</body>
</html>
The code you posted shows zip and zip+4 on the same line for me in Firefox, Chrome, and IE. Can you post a screen shot of how you see it differently and how you want it to look?