Here is the jsfiddle.
This is suppose to give this :
But it does that instead :
Here is the HTML for that part of the page :
<input type="submit" name="BT_resetZoom" value="Reset coordinates" id="BT_resetZoom" tabindex="10" style="height:50px;width:125px;">
<div style="display: inline-block;">
<span id="LBL_Xmin" class="labelsAxis">X :</span>
<input name="TXT_graphXmin" id="TXT_graphXmin"
tabindex="3" type="text" style="width:75px;">
<span id="MainContent_LBL_Xmax"
class="labelsAxis">to</span>
<input name="TXT_graphXmax" id="TXT_graphXmax"
tabindex="4" type="text" style="width:75px;">
<br>
<span id=LBL_Ymin" class="labelsAxis">Y :</span>
<input name="TXT_graphYmin" id="TXT_graphYmin"
tabindex="5" type="text" style="width:75px;">
<span id="MainContent_LBL_YMax"
class="labelsAxis">to</span>
<input name="TXT_graphYmax" id="TXT_graphYmax"
tabindex="6" type="text" style="width:75px;">
<br>
<br>
</div>
I have tryied fiddling with heights, I tryied to surround the button with <div> tags. Nothing works.
How can I make a button align with a div?
To your input's CSS add vertical-align:top:
<input type="submit" name="ctl00$MainContent$BT_resetZoom" value="Reset coordinates" id="MainContent_BT_resetZoom" tabindex="10" style="height:50px;width:125px;vertical-align:top;">
jsFiddle example
The default vertical alignment is baseline, which is what gives your original output.
Try defining the float attribute.
For input float:left
For div float:right
You can add
display:block;
float:left;
to your MainContent_BT_resetZoom
If you do not want to use float, then use
vertical-align:top;
on your MainContent_BT_resetZoom
Related
I have two examples of a label and a text field that I'm trying to align (You can see it in this fiddle). In the first example I have a label and a text field like this:
<label for="firstname" style="width:100px;display:inline-block;background-color:red;">Firstname: </label>
<input type="text" style="margin:0;padding:0;" id="firstname" name="firstname" value="" />
In the second example, I have a label and a three floated text fields in a div like this:
<div>
<div style="width:100px;float:left;background-color:red;">Date: </div>
<div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
</div>
As you can see above, I give each label a width of 100px, but for some reason, in the second example, there is no space between my label and the first text field. Does anybody know why this is happening and why my width of 100px does not seem to have any effect in my second example (view fiddle link above).
Thank you
You can use inline-block instead of float to make it appear as of the previous section to get the margin effect else you need to add a margin with floated element.
<div style="width:100px;display:inline-block;vertical-align:top;background-color:red;">Date: </div>
<div style="display:inline-block;">
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
Demo
or add a margin.
<div style="width:100px;float:left;margin-right:4px;background-color:red;">Date: </div>
Demo
On a side note, consider using css rules instead of inline styles
The space is because the first element is a replaced inline element, which kinda has the same behaviour as inline-block and adds margin.
And for the width, remove size="2" and maxlength="2" to make it the same with as the upper input fields
Well first of all your first example with the "Firstname" label is using a "label" tag which is treated differently then a "div". That brings me to the second example of "Date" which is surrounded by "div" tags. Because of this, the default way for the browser to handle them is different.
You could easily compensate for this difference by adding a right margin to the label using the "div" to surround it.
<div style="width:100px;float:left;background-color:red; margin-right:5px;">Date: </div>
Although it is ok to use inline styles, I would suggest if you are going to be using this in a larger document to put this inside a external CSS file and use a class (or ID) for the div instead.
I'm working on a simple contact form, but I'm having some issues making my content float next to each other.
<article>
<form action="contact.html">
<label for="naam">Naam*:</label>
<input type="text"
id="naam"
required="required"/>
<br/>
<label for="voornaam">Voornaam*: </label>
<input type="text"
id="voornaam"
required="required"/>
<br/>
<label for="straat">Straat: </label>
<input type="text"
id="straat" />
<br/>
/*Some code is left out */
<label for="message">message*: </label>
<textarea rows="4"
cols="16"
required="required">
</textarea>
<br/>
<input type="submit"
value="Verzenden"
id="btnVerzenden" />
</form>
</article>
And this is my current CSS
label
{
width:100px;
float:left;
}
How can I make my "Message" textarea float on the right side of the article while the rest is on the left side?
UPDATE
#PSCoder solved it!
This fiddle shows the solution - http://jsfiddle.net/8PvkV/
Give your label : display: inline-block;
label {display: inline-block}
Here's a sample:
http://jsfiddle.net/Riskbreaker/35Hyh/1/
You want to either move the textarea element before the rest or float the form to the right.
Because of the order that you have entered the elements, the "Message" text box is cleared and then floated.
I would like to align the following:
<div class="span5">
<div class="">
<span class="label">Label1</span>
<input type="text" class="input-medium" placeholder="0">
</div>
<div class="">
<span class="label">Label2</span>
<input type="text" class="input-medium" placeholder="0" >
</div>
<div class="">
<label class="checkbox inline">
<input type="checkbox"><span>Something</span>
</label>
<input type="text" class="input-medium" placeholder="0">
</div>
<div class="">
<span class="label">Label4</span>
<input type="text" class="input-medium" placeholder="0">
</div>
<div class="">
<span class="label label-inverse">Label5</span>
<input type="text" class="input-medium" placeholder="0">
</div>
</div>
Here's the fiddle:
http://jsfiddle.net/qP46X/1267/
I tried margin right but it didnt help. I am not sure how to align the textboxes together
Use a set width for the .label elements. Ideally you'd have consistency in the layout and you could also use labels for all of the text, but a set width + display: inline-block will work. You can of course change the width as needed.
http://jsfiddle.net/qP46X/1268/
you can also use twitter bootstrap form-horizontal css class and its sub-component classes to fulfill your requirement. i modified a bit styling of your code but you might achieve exactly what you want from the below reference( see Horizontal form in the below link)
Reference: http://twitter.github.com/bootstrap/base-css.html#forms
Demo: http://jsfiddle.net/qP46X/1269/
I have a fieldset with a text input box, with a submit button. I want them to appear in a single row but the fieldset appears in one row, and then the continue appears in the next. Here's my html:
<label><fieldset class="registration_code">
<legend>Registration Code</legend>
<input type="text" name="regis_code" id="regis_code"/>
</fieldset>
<input type="button" class="button2" name="Submit" value="Continue"/>
</label>
I've tried all combinations of making the button or the fieldset inline, inline-block, float:left, float:right. none of them are resulting in what I want. I just want a single row displaying both of these elements. How do I go about doing this?
Not sure why you wrapped your code in a label tag:
http://jsfiddle.net/hyxaK/1/
<fieldset class="registration_code">
<legend>Registration Code</legend>
<input type="text" name="regis_code" id="regis_code"/>
</fieldset>
<input type="button" class="button2" name="Submit" value="Continue"/>
.registration_code { display:inline-block; }
Either you can do this,
<label>
<fieldset class="registration_code">
<legend>Registration Code</legend>
<input type="text" name="regis_code" id="regis_code"/>
<input type="button" class="button2" name="Submit" value="Continue"/>
</fieldset>
</label>
or this,
fieldset{
display : inline-block;
}
DEMO
Browser is Firefox.
I have a list of 15 radio buttons. After displaying them like this:
<div class="abcd" style="margin-left:10px;">
<form id='some'....>
<legend>Select Item type :</legend>
<fieldset style="display:block;float:left;">
<input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC
...
</fieldset>
<p>
<input placeholder="Enter Name/Value" name="xxx" id="xxx" size="40" style="display:block;float:left;">
<button type="button" id="xxx" style="width:100;">Process</button>
</p>
</form>
</div>
Everything is displaying in one line. I am not sure how to display the textbox under radio buttons with some space in between.?
pl help.
The problem with your style is the float: left, you have to clear the "floatness".
At the p tag, include the clear:both, it tells the browser that nothing can float at its left or right.
<div class="abcd" style="margin-left:10px;">
<form id='some'>
<fieldset style="display:block;float:left;">
<input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC
<input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC
<input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC
</fieldset>
<p style="clear:both">
<input placeholder="Enter Name/Value" name="xxx" id="xxx" size="40" style="display:block;float:left;">
<button type="button" id="xxx" style="width:100;">Process</button>
</p>
</form>
</div>
paste
<div style="clear:both"></div>
after the fieldset.
When using the float attribute you have to clear it so that other elements won't appear floating next to it. try adding clear: both to the css of the input box like this:
<input placeholder="Enter Name/Value" name="Name" id="NameID" size="40"
style="clear:both; display:block;"/>
Try adding the css rule to the radio buttons themselves. Like this:
<style type="text/css">
.group0
{
display:block;
}
</style>
This assumes group0 is the group with all the radio buttons.