I am making this basic thing were there is a label followed by a textblock and on another line there is a button with a textblock for the answer besides the button.
I want the button(generateButton) and the textblock for answer (answerField) under the label (labelDay)and the first textblock(dayInput) but when I clear left on the button and the answerbox it sets the button under the label and first inputbox but my answerbox goes under my button and it needs to be besides it. Is there a way to do it without a br tag?
This is my code so far
#labelDay{
margin-left: 5px;
position: relative;
float: left;
}
#dayInput{
position: relative;
float: left;
margin-left: 5px;
}
#generateButton {
float: left;
clear: left;
}
#answerField{
float: left;
clear: left;
}
<label for="dayInput" id="labelDay">Geef een dag in:</label>
<input type="text" id="dayInput"/>
<input type="button" id="generateButton" value="Genereer tekst" class="answer"/>
<input type="text" id="answerField" class="answer">
Why do you use float in this situation?
All Elements are inline-elements. So they would appear next to each other.
My approach is to define two div-blocks for the rows (no css):
<div>
<label for="dayInput" id="labelDay">Geef een dag in:</label>
<input type="text" id="dayInput"/>
</div>
<div>
<input type="button" id="generateButton" value="Genereer tekst" class="answer"/>
<input type="text" id="answerField" class="answer">
</div>
You almost had it - you just need to remove the clear: left from #answerField.
Floats make elements "flow" around eachother - you can imagine a bunch of float: left elements as each trying to move as far to the left as they can without touching another element or going off the side of the screen before going to the next line.
A clear on an element forces itself, and any floated element after it to the next line - so your clear on #generatButton is already starting a second line, and the on #answerField is starting an unwanted 3rd one.
#labelDay{
margin-left: 5px;
position: relative;
float: left;
}
#dayInput{
position: relative;
float: left;
margin-left: 5px;
}
#generateButton {
float: left;
clear: left;
}
#answerField{
float: left;
}
<label for="dayInput" id="labelDay">Geef een dag in:</label>
<input type="text" id="dayInput"/>
<input type="button" id="generateButton" value="Genereer tekst" class="answer"/>
<input type="text" id="answerField" class="answer">
Related
I have defined a simple form to learn about clear. I am surprised the 'Submit' button is not going to the next line. My understanding of clear:both is that there should be no floated element to the left or right of the element to which clear is applied. Given this definition, I was expecting Submit to move the last line since I have applied clear to input and label.
can someone pls explain why this is not working? Pls note my goal is to understand where my understanding is flawed and not how to bring the Submit button to the next linec
label {
color: blue;
float: left;
margin-right: 2px;
clear: left;
width: 3em;
}
input {
border: 2px black solid;
float: left;
width: 10em;
}
button {
clear: both;
margin-left: auto;
margin-right: auto;
}
<form action="#">
<fieldset>
<label>Name </label>
<input type="text" value="Enter name" />
<label>Phone </label>
<input type="text" value="Enter phone" />
<button type="button">Submit </button>
</fieldset>
</form>
9.5.2 Controlling flow next to floats: the 'clear' property
Applies to: block-level elements
Button, is by default, an inline level element, not a block level element. To make clear apply, give it display:block;
label {
color: blue;
float: left;
margin-right: 2px;
clear: left;
width: 3em;
}
input {
border: 2px black solid;
float: left;
width: 10em;
}
button {
display:block;
clear: both;
margin-left: auto;
margin-right: auto;
}
<form action="#">
<fieldset>
<label>Name </label>
<input type="text" value="Enter name"/>
<label>Phone </label>
<input type="text" value="Enter phone"/>
<button type="button">Submit </button>
</fieldset>
</form>
I've got a static site, which is all of a sudden displaying irregular headings. This is a single page with lots of JavaScript including tabular selections at the top of the page. The site worked just fine six months ago. Now I'm seeing unexplained mis-alignment of input elements on a half of the 12 different navigation tabs:
Decorative Ends
Round to Tapered
Bracing
Round to Square
Round to Flat
Airframe Cluster
The headings contained within a form:
<form id="dte_form">
<div class="containerLeft">...</div>
<div class="containerLeft">...</div>
<div class="containerLeft">
<label title="Data can.. [hover info]">Tube O.D. (mm): </label>
<input type="text" id="dteCutTubeOD" value="31.75" size="8">
<br>
<label>Amplitude (mm):</label>
<input type="text" id="dteAmplitude" value="25.4" size="8">
<br>
<label># of Cycles:</label>
<input type="text" id="dteNumOfCycles" value="3" size="8">
<br>
</div>
<div style="clear: both"></div>
<div class="containerLeft">
<input type="button"...>
<input type="button"...>
<input type="button"...>
<input type="button"...>
</div>
</form>
The CSS is nothing fancy:
.containerLeft {
float: left;
margin: 4px 20px;
}
.containerLeft label {
float: left;
height: 21px;
margin: 8px 5px 0 5px;
}
.containerLeft input[type=text] {
float: right;
height: 15px;
margin: 4px 5px;
padding-left: 5px;
}
The heading should look like this:
Basically, in a div, I would float the label left, float the input element right, add a <br> and repeat. I can't figure out why occasionally the elements don't line up correctly. I'm sure I'm missing something silly, but I just can't see it. Any ideas what is causing the occasional misalignment?
Click here for website. Note. I'm seeing the same results in both Chrome and Firefox.
This is what happens when you use floats. They overlap following blocks and shrink line boxes.
If you want to prevent an block element from being adjacent to a float, just use clear.
.float {
float: left;
width: 50px;
height: 3em;
border: 1px solid;
background: yellow;
}
.normal, .clear {
height: 2em;
border: 1px solid;
background: pink;
}
.clear {
clear: left;
}
<div class="float">Float</div>
<div class="normal">Normal</div>
<div class="normal">Normal</div>
<br /><br />
<div class="float">Float</div>
<div class="normal">Normal</div>
<div class="clear">Clear</div>
So apparently the issue is related to element height. Note that the label and input elements have different heights. This was done for appearance. In some combinations and element lengths the float thing gets futzed up.
The corrective action was to modify the CSS style sheet in one place:
.containerLeft label {
clear: both; /* new addition to this element */
float: left;
height: 21px;
margin: 8px 5px 0 5px;
}
An alternative would be to use <div style="clear: both"></div> in lieu of the <br> elements (or use the handy CSS library classes offered up by Oriol)
I'm using a form like the following:
<form action="#" method="post">
<div class="row">
<label for="email">E-Mail</label>
<input type="text" name="email" id="email">
</div>
<div class="row">
<label for="password">Password</label>
<input type="password" name="password" id="password">
<br>
<label for="passwordRepeat">Repeat Password</label>
<input type="password" name="passwordRepeat" id="passwordRepeat">
</div>
<div class="row">
<label for="phonenumber">Phone Number</label>
<input type="text" name="phonenumber" id="phonenumber">
</div>
</form>
with the following styles:
.row {
background-color: #eee;
margin-bottom: 10px;
padding: 5px;
}
.row > * {
display: inline-block;
vertical-align: middle;
}
.row > label {
width: 200px;
}
Take a look at the JSFiddle.
I'm using a <br> tag to break the line between a bunch of elements with the property display: inline-block. I'm aware that it is of course bad practice to use <br> instead of margin and padding. That's the reason it became so unpopular.
As far as I know there is no good reason to not use a single <br> tag in an inline element as it is intended to be: As a line break in text without creating a new text section. With display: inline-block, you simulate the inline behaviour to your block elements. Spaces between elements appear as they would in an inline element.
In my case, the <br> is used instead of two wrapper <div>'s. I do like my HTML code clean, so I hesitate in using to many wrapper <div>'s. Is it bad practice to use a <br> in this exact case? I think it is very clear what happens here, if you just read the HTML flie. What do you think about that (without any prejudgments about <br> in general)?
I believe the answer is Yes. <br /> is for line breaks in text and not for positioning, But I will give you a situation where it would hurt you in the long run. Say you have a mobile layout for your fields, and you want them to be 100% width on small screens - with labels above... and then in another case you want them to vertically align next to another... and then in another situation land in a grid like setup. Those linebreaks are going to become cumbersome.
Here is a jsFiddle of that.
I did see someone using them in a clever way where they used display: none; on them at certain break points that rendered them inactive. I didn't expect that to work. I can only really imagine using them for:
Cosmo magazine
style - huge
text layouts
and even then I would use lettering.js to insert spans. But hey --- it's not that people will say you were wrong... it's what does the job best. And I don't think that <br /> ever really suits positioning.
With HTML5, it seems like everything has an element now, so div's are for positioning. That seems pretty semantic to me.
HTML
<div class="input-wrapper">
<label data-required="required">E-Mail</label>
<input type="email" name="email" />
</div>
CSS
.your-form .input-wrapper {
width: 100%;
float: left;
margin-bottom: 2em;
}
.your-form label {
display: block;
width: 100%;
float: left;
}
[data-required="required"]:after{
content: "*";
color: red;
font-size: .8em;
vertical-align: top;
padding: .2em;
}
.your-form input{
display: block;
width: 100%;
float: left;
}
#media screen and (min-width: 28em) {
.your-form label {
width: auto;
float: none;
display: inline-block;
vertical-align: middle;
min-width: 10em;
}
.your-form input{
width: auto; /* overide previous rule */
float: none; /* overide previous rule */
display: inline-block; /* center vertically */
vertical-align: middle; /* center vertically */
/* min-width: 20em; */
font-size: 1.4em; /* just to show vertical align */
}
} /* end break point */
Yes, as you are using a content element for styling.
It might be shorter, but that doesn't mean it's cleaner.
Adding elements just for styling purposes should be avoided if possible.
And in this case it's possible: Demo
HTML:
<form action="#" method="post">
<div class="row">
<label>E-Mail <input type="text" name="email" /></label>
</div>
<div class="row">
<label>Password <input type="password" name="password" /></label>
<label>Repeat Password <input type="password" name="passwordRepeat" /></label>
</div>
<div class="row">
<label>Phone Number <input type="text" name="phonenumber" /></label>
</div>
</form>
CSS:
.row {
background-color: #eee;
margin-bottom: 10px;
padding: 5px;
}
.row > label {
display: block;
overflow: hidden;
width: 350px;
}
.row > label > input {
float: right;
}
I would avoid it where possible. You may be able to achive what you want, and not use floats by adding a margin to the input element like:
.row > input
{
margin-right:50%;
}
http://jsfiddle.net/pwtA4/
You may need to add some media queries if you want for smaller view ports
I'm having trouble containing CSS to a single div without scrambling everything.
I'm trying to get hospital/name/title/dep on seperate lines(vertical) with aligned text boxes then the other sections on the same line respectively(horizontal)
Any help would be greatly appreciated
<div class="main" id="boxalign">
<p>
<label>Hospital:</label> <input type="text"/><br>
<label>Name:</label> <input type="text"/><br>
<label>Title:</label> <input type="text"/><br>
<label>Department:</label> <input type="text"/><br>
</p>
</div>
CSS
#boxalign, label p{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}
Not sure if my problem really shows with the code above so heres all of in jsfiddle: http://jsfiddle.net/f8qa2/
I think your CSS selector is malformed, try this instead:
#boxalign label p {
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}
Also, rather than use <br>s to break lines, put each <label>/<input> pair in it's own <p>:
<div class="main" id="boxalign">
<p>
<label>Hospital:</label>
<input type="text" />
</p>
<p>
<label>Name:</label>
<input type="text" />
</p>
<p>
<label>Title:</label>
<input type="text" />
</p>
<p>
<label>Department:</label>
<input type="text" />
</p>
</div>
Fiddle
I don't think you meant to put that comma there, everything looks good without it.
#boxalign label p{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}
Link
#boxalign, label p Means that you want to target elements with the id boxalign and p tags within labels.
#boxalign label p Means that you want to target p tags within labels with a parent element with the id boxalign.
I think you just have a rouge , and your p and label are the wrong way round in your selector.
Try
#boxalign p label{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}
Example here
Your selector is wrong. It should be #boxalign p label {}.
label and p are round the wrong way based on your HTML.
remove the unceccesary "," from the css selector.
Hope that helps.
My form looks like:
**
<p><label>first name</label><input type=text name=fn /></p>
<p><label>last name</label><input type=text name=ln /></p>
</div>
<div id="rightform">
<p><label>state</label><input type=text name=state /></p>
<p><label>city</label><input type=text name=city /></p>
</div>
**
I want the layout so all the labels line up on the left (with the label text right-aligned), and the input box all lined up, floating to the left.
So the form should look like:
asdf-label INPUTBOX
123-label INPUTBOX
yet-another-label INPUTBOX
There will be another form on the right side of the above form (with the id=#rightform)
Really confused how to do this properly...
Personally I seldom use the floating technique, even though it's very common. The reason: It's very brittle for more complex situations.
I almost always do this:
<form ...>
<p>
<label for="id1">Label 1</label>
<input id="id1" ... />
</p>
<p>
<label for="id2">Label 2</label>
<input id="id2" ... />
</p>
</form>
And CSS:
p {
position: relative;
}
label {
position: absolute;
width: 150px;
left: 0;
top: Xpx /* x to align nicely with the baseline of the text in the input */
}
input {
margin-left: 160px;
}
It's very seldom a problem with multiline labels that overflow the <p>.
To make it work in IE6 and possibly IE7 you need to throw in something to give the <p> hasLayout. zoom: 1; does the trick, or specifying a width.
This should do it:
label {
width: 150px;
margin-right: 10px;
text-align: right;
float: left;
}
No need for any special styling for the input elements.
As for the divs, just give them a fixed width and float: left;, they'll align next to each other nicely. Just use clear: both; where necessary.
You will need to float all your labels to the left, set them to a fixed with, and then text-align them right:
label {
float:left;
text-align:right;
width:20em;
}
p {
clear:right;
}
The easiest way is to float elements and set a width and text-align: right for labels.
Something like:
label {
width:200px;
text-align:right;
}
input {
float:left;
}
You can check http://jeffhowden.com/code/css/forms/ for an all css example
Well easy way is table, but that is not correct.
<div style="float: left; width: 100px;">
<label>last name</label>
</div>
<div style="margin-left: 100px;">
<input type=text name=state />
</div>