I am new to CSS/HTML and struggling to understand why when putting text "Title" out of div.position container label goes down. Thanks for you help.
My code
CSS code:
div {
display: inline-block;
}
.position {
float: left;
}
HTML code:
<div>
<label>Label</label>
<div class="group">
<div class="position">
<input type="radio" />
</div>
Title
</div>
</div>
The default value for vertical-align is baseline.
That's why the label appears at the baseline of the parent div. (see the image)
However when the title text is within the position div the height of the div is less - that's why it looks like the label stays on top. In reality it is still at the baseline of the parent div.
If you set vertical-align:top on the label it will appear at the top like it should
FIDDLE
You need to set the label float to left:
label {
float: left;
}
http://jsfiddle.net/w6kosc2v/2/
Here is a good article about how floating works: All About Floats which might explain a little more about floats to you.
Shortly said a float will float to the side you set it to; float: right floats to the right, while an image is floated to the right, all other inline elements tend to wrap around your float, a your <label> tag did. You can fix this by either removing the float: left from your .position or also by adding it to the label.
I hope this awnser makes it somewhat more clear.
Related
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
try this and check this fiddle
.box {
width: 40%;
margin-left: auto;
}
I'm not 100% on what you are asking for, but here is a JSFiddle using p elements inside of one div.
https://jsfiddle.net/3ct2syhp/
CSS
.box {
display: inline-block;
margin-left: 50%;
}
HTML
<div>
<p>
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
</p>
<p class="box">
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
</p>
<p>
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
</p>
</div>
The elegant way:
div {display: table; margin-left: auto; text-align: left;}
In this fiddle I have a load of divs, an input and some images that are displayed inline. I want to shift the images down a bit so it looks nicely aligned, but when I apply padding or margin, it simply pushes down every element inside the container.
<div class="rs-paging">
<div class="rs-pageclick">
<img class="rs-selectfirst" src="http://findicons.com/files/icons/2296/fidelity/32/arrow_left.png" alt="" title="First Page">
</div>
.rs-pageclick img {
cursor:pointer;
display: inline-block;
margin-top: 15px;
}
http://jsfiddle.net/paull3876/qds8pnfx/2/
I've tried display:table/table-cell, no difference. I started without the images in container divs and that was just the same. vertical-align:top doesn't seem to help. And it ssems the same with padding or margin.
I don't really want to resort to position absolute/relative as I think there should be a way with simply setting padding. This is driving me nuts !
thanks
The elements are all set to display: inline-block;. When you give one of the elements a margin-top, you push the whole line down.
Are you trying to get the items to align vertically? If so, you could use vertical-align: middle; on the inline-block elements.
http://jsfiddle.net/nea4w6h3/1/
Using overflow:hidden and fixing height for divs seem to work and fit your requests (I added a div containing all the text ones) :
https://jsfiddle.net/qds8pnfx/5/
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'm teaching <div> and i have problem. Div is under image, but I want next to. I tried with setting float, position but nothing help.
Jsfiddle (here divs/images are unconnected!)
How to change it to connect images and form on up?
Divs automatically create a line break, because they are block elements. Try using display: inline-block on the div.
I updated your fiddle now: http://jsfiddle.net/aqqUV/3/
Note the code change here:
<div class="form" style="
margin-left: 70px;
color: white;
display: inline-block;
">
Just give first image a width and
display:inline-block;
float: left;
and then give these proerties to div following image
display:inline:block;
float:left;
you could try giving the first div a width and let it float left.
the folowing div elements should float next to it, but don't forget to clear:both at the end!
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.