I'm new in CSS, and I've got one question. I'd like to make a good simple form, and there is the following code:
<form>
<div class="row"><label for="name">Some text field</label><input type="text" name="name" /></div>
<div class="row"><label for="surname">Some another text field</label><input type="text" name="surname" /></div>
</form>
Some CSS code:
label {
float: left;
width: 230px;
text-align: right;
margin: 5px;
}
.row {
clear: left;
}
I copied and pasted this code from some book. I understand floating, clearing, but I don't understand why does "width" attribute work with label (because it inline element) and, in this case, why doesn't "width" work without "float"? Please, make me clear. Thanks
The Label element is defaulted to inline display mode.
Inline elements don't accept a width property, they will be rendered in the width of their content.
Floated elements on the other hand, are like inline-blocks. they will accept a width property.
By applying a float property to an element you are essentially changing it's display property to something like (but not exactly) inline-block.
label is inline element so it doesn't accept the width. To accept the width of any element it should be either inline-block or block element. And by setting float to any element behaves like this is an inline-block element and also another info for you position absolute or fixed also thinks as it is a block level element.
If you want to make label accept the width you should define label as inline-block.
label {
/*float: left;*/
display: inline-block;
width: 230px;
text-align: right;
margin: 5px;
}
Related
I'm working through a tutorial and I have a form that uses float elements. The form currently has all the labels and input boxes next to each other.
To align the form so that everything is on the left the book teaches me to:
Put-> clear: left; as below
label {
float: left;
width: 5em;
text-align: right;
margin-right: .5em;
**clear: left;**
}
input {
background-color: #CCCCFF;
float: left;
clear: right;
The way I understand the clear attribute is that if I set it on a floating element, it means that I want nothing to the left/right/both of that element.
Therefore, in my head, instead of putting the clear attribute on the label, putting that clear:right; on the input should also work (because then nothing can be on the right side of the input box), but of course it doesn't.
There's a gap in my understanding, can someone please point out why putting the clear:right attribute on the inputs won't work the same as putting the clear:left attribute on the label?
Thank you
basically the clear property kind of overwrites the float.
i prepared this example: http://jsfiddle.net/vlrprbttst/JF7wD/1/
all divs are floated to the left. when float is applied, they all go next to each other. what if you need to temporary block this behaviour but still need a floated element? that's when you use clear
not the best way to explain it but i hope you got it :)
it won't work as you are using float: left and want to clear: left, not clear: right. as demonstrated here
See my code below:
CSS
label {
float: left;
width: 5em;
text-align: left;
margin-right: .5em;
clear: left;
}
input {
background-color: #CCCCFF;
float: left;
clear: left;
}
HTML - ensure the order you want the labels in is correct here too
<form>
<label>test</label><input type="text"></input>
<label>test</label><input type="text"></input>
<label>test</label><input type="text"></input>
</form>
You can choose to clear both if unsure, however if you are floating left use clear left, not clear right, as there is nothing to clear on the right.
The <input> and <label> elements are inline elements by default, so under normal circumstances they do not fill the width of their parent elements and do not require their own line. So having <input> elements and <label> elements one-after-the-other do not strictly require any floating logic:
<form>
<input type="text"></input><label>test</label>
<input type="text"></input><label>test</label>
<input type="text"></input><label>test</label>
</form>
Without any CSS, the above markup produces this:
The float:left CSS is used to force elements out of the flow of the document, and hug their adjacent counterparts. It's used mainly on block elements. The clear:left/right/both then overrides this functionality in order to bring the proceeding elements back into the flow of the document. Read about it here.
If you're simply wanting to force <input> elements to be on their own line, perhaps you could wrap them in a block element like a <div>:
<form>
<div>
<input type="text"></input><label>test</label>
</div>
<div>
<input type="text"></input><label>test</label>
</div>
<div>
<input type="text"></input><label>test</label>
</div>
</form>
The above, without any CSS, will produce this:
Read about inline and block elements in order to further your understanding of how elements are positioned naturally within the document.
To summarise, the float CSS property is a way of taking an element out of the flow of the document and positioning it to the left or right of inline elements. To quote MDN:
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
I want to change the margin between the label and input of a simple HTML form. The labels are below the input fields. When I set a class I can change other properties like font-size but not margin.
A <label> is displayed as inline by default. You have to change that to inline-block or block in order to set the margin.
label {
display: inline-block;
margin: 10px;
}
Some resources to learn more about the CSS box model:
MDN article
CSS-Tricks article
Some resources to learn more about the display attribute in CSS:
MDN article
you can't set margin top and bottom for , because tag is called as inline element, if u need to set margin top or bottom,then change to block element like below codes
label {
margin: 10px 0px;
display: block;
}
or
label {
margin: 10px 0px;
float: left;
}
If you add css "Float:left" for any element , then tat will changed as block element
Think of spans and text to be inline. In-line elements must be turned block in order to use a margin. Also making it block means if the label is too big it can push content down.
I often find that I want an element to adjust its width to the size of the elements it contains. inline-block acheives this. However, I do NOT want the inline part of inline-block -- i.e., I still want the next inline-block element to appear below it.
Is there a simple way to achieve this in CSS? I know I can't always but <br> tags after the element in my HTML, but that's annoying.
You can do that with two elements:
<div>
<div class="element">
content...
</div>
</div>
With the CSS rule:
.element { display: inline-block; }
Treat .element as the "real" element that you're adjusting the width of. The enclosing <div> is just there to force each element into its own inline flow.
there are many solutions, the most common one is to use float
<div class="float">
<div class="child">here is content</div>
</div>
.float{float: left;}
if you want enforce that an element is in the new line you add clear: both (or left or right, depending on your needs)
please take into account, that display: inline-block does not work in IE7. The only problem with float is when you want this div to adjust to the width of a child AND to position it at the middle of the page horizontaly
one more note, remember that overflow: hidden property is your best friend whenever you encounter any issues with floated divs :)
Here is a fiddle that achieves what you describe: http://jsfiddle.net/PhilippeVay/VwCgJ/
It uses floating elements (thus width is ajusted to content), a class on the last element you want on a line and the clear property on the next element, with the help of the adjacent selector .rightmost + span
HTML:
<p>
<span>lorem</span>
<span class="rightmost">ipsum</span>
<span>third item: below please</span>
<span>fourth and last</span>
</p>
CSS:
span {
display: block;
float: left;
padding: 20px;
background: lightblue;
border-right: 2px solid white;
}
.rightmost {
background: red;
color: white;
}
.rightmost + span {
clear: both;
}
Inline content (as for inline-block) will occupy the whole width of its container and you've to force a new line with the br element.
On the other side, floating elements can be cleared (and with adjacent selector, you can clear the element after a particular one).
Simply enough I can't get text to align to right in a <label> element.
HTML
<div id="contact_form">
<label for="name" id="name_label">Name:</label>
</div>
CSS
#contact_form label {
text-align: right;
}
My page: http://freshbeer.lv/development/en/contact.php
You can see labels for name, phone, email etc... are aligned to the left, but I need them to be aligned to the right, so could anyone please suggest something?
Label is an inline element - so, unless a width is defined, its width is exact the same which the letters span. Your div element is a block element so its width is by default 100%.
You will have to place the text-align: right; on the div element in your case, or applying display: block; to your label
Another option is to set a width for each label and then use text-align. The display: block method will not be necessary using this.
You can make a text align to the right inside of any element, including labels.
Html:
<label>Text</label>
Css:
label {display:block; width:x; height:y; text-align:right;}
This way, you give a width and height to your label and make any text inside of it align to the right.
As stated in other answers, label is an inline element. However, you can apply display: inline-block to the label and then center with text-align.
#name_label {
display: inline-block;
width: 90%;
text-align: right;
}
Why display: inline-block and not display: inline? For the same reason that you can't align label, it's inline.
Why display: inline-block and not display: block? You could use display: block, but it will be on another line. display: inline-block combines the properties of inline and block. It's inline, but you can also give it a width, height, and align it.
In this example, I'm setting width:200px on form labels.
This is not being applied for some reason, and the field appears 0 width when viewed in Chrome Dev Tools.
Any idea why?
label is an inline element, like a span. It does not have width, but flows with its content. To get it to behave like a div, you would have to instruct it to act like a block-level element:
display: block
From there, you could add width:
width: 200px;
float: left;
As above, you need to get your label to behave like a block element to get it to respect your width declaration. The simplest way to do this is to set it to inline-block like this:
#form label {
width:200px;
display: inline-block;
}
Or, as #David mentions, float it left. This article describes getting this to work cross-browser.
This is because the label is an inline element so does not have a width property. To set the width you need to make it a block or inline-block element:
#form label {
display: block;
width: 200px;
}
Label is an inline element, so you cannot apply a fixed width to it (unless you change its display behavior). See here for a quick map of options/browser compatibility
http://www.quirksmode.org/css/display.html