Dear community members,
I would like to position the text inside test in the center of a div. The code would look like the following:
<div id="main" style="width: 960px;">
<form>
<label for="test">Testing everything:</label>
</form>
Now if I try the following section of code:
<label for="test" style="width: 100%; text-align:center;">Testing everything:</label>
It does not center the text inside my main layer. Do I need to put a layer arround the label tags making it:
<div style="width:100%; text-align:center;"><label for="test">Testing everything:</label></div>
What is the standard method to accomplish that?
Thank you for your responses!
Your problem is very simple : label is not a block-level tag, which means that you can't give label elements a width. In other words, the width of a label element is the width of its content.
In your case, that means that it doesn't fill the entire width of your "test" div and then can't be centered.
To fix this, just add the following CSS property to your label :
display: inline-block;
This way, your label will be considered as a block for everything width (and height) related and your 100% width will be applied successfully, leading to a nicely centered text.
Related
In my html page I have an input component placed above a div component.
I want the input and the div to have the same width, the input has a "size" attribtue of 30.
If I use the "style" attribute of the div with "width : 30ch" or with "width : 30em" it doesn't seem to work, the div component is getting way wider than the input component in both cases.
Which attribute should I use to make the div's width match the input's size attribute?
code :
<input type="text" readonly="yes" value="a" size="30" ID="b">
<div id="c" style="width : 30ch"></div>
The size attribute sets the visible width in “characters”, and browsers interpret this differently. The ch unit, in supporting browsers, means the width of the digit 0, so it is defined very exactly, though it of course depends on the font. So these two ways of setting width are incommensurable.
To make a div element after an input element exactly as wide as the input element, the simplest way is to wrap them in a table with fixed layout. (Those who can’t bear with HTML tables can use a CSS table instead.) You don’t set the width of the div element at all in this approach; it gets its width from the table formatting. I have just set some content and a background color for it so that the width of the element is visible.
<table style="table-layout: fixed" cellspacing=0>
<tr><td><input type="text" readonly="yes" value="a" size="30" ID="b">
<tr><td><div id="c" style="background: green">Hello world</div>
</table>
try width attribute in both i.e. in input and div also , plus try to give width in %
html:
<html>
<input id="myinput"></input>
<div id="myDiv"></div>
</html>
css :
#myDiv{
width:x%(set x per your requirement)
}
Use this style to set exact same width for both your input and your div
input#b, div#c {width:100px;}
I would need advice on how to do that I have reached the correct result. Here is a sample code.
I used the main attribute table-cell that I reached the vertical centering, but not me centered DIV #box under DIV #wrap. Neither ANCHOR vercital centering under DIV #box. ANCHOR object must align automatically without specifying the size. Images under ANCHOR may have different sizes.
All ANCHOR objects under DIV #box must align automatically without any separation into DIV blocks. Into DIV #box are automatically displayed those items that can fit in there. Sorting may not be conditional size and neither the number of items. The only condition is the height and width of the DIV #box.
Example:
Main structure
Sequence ANCHOR must not be fixed specified or limited to the number; automatically centered on all sides under DIV #box; automatically adjust the image size.
DIV #box must be aligned horizontally to center under DIV #wrap, has specified a
fixed width and height; the entire contents of the DIV #box must be aligned to the center, both horizontally and vertically; everything that does not fit in the block will be automatically hidden.
It may also be a solution via jQuery.
Thanks for resp.
If you don't allow separation in additional DIV wrappers, then it is impossible to achieve your result cleanly and with reusable non-hard-coded code.
You restrict development options (probably not your fault) by not allowing to change HTML structure.
But if there were no restrictions, then there would be multiple ways to solve this problem:
Using HTML and wrapping little objects into group wraps and a bit of CSS
Hard code CSS with negative margins, relative positioning for every single element
Achieve the same thing with jQuery / JavaScript but with lots of exceptions and computations
Because elements in HTML can be of 2 types - block and inline .
[ let's not go here into specifics of what inline-block elements and other types are]
If an element is of block type then the next proceeding element will jump to the next row , but if the element is of type inline then the next element will line up next to it if there is space in the row. The height of the row is dictated by the highest element AND NOT by a group of highest elements .
The only way to achieve that would be to wrap them into a group.
So in CODE this would look like so:
HTML:
<div id="box">
<img src="" /><p>TEXT</p>
<img src="" /><p>TEXT</p>
<span id="group">
<img src="" /><p>TEXT</p>
<img src="" /><p>TEXT</p>
<img src="" /><p>TEXT</p>
</span>
</div>
CSS:
#group {
display:inline-block;
vertical-align: middle;
}
#group > :first-child {
display:block;
}
RESULT in jsFiddle
I was trying to make a scrollable with a fieldset but then the scroll is not working. I'd like to make a scroll because when the text is already not seen the scroll in mozilla firefox is not display also. That's why I'm trying to put or insert a overflow in fieldset but not working...
Here's the sample code I'm using.
<div class = "sam">
<fieldset>
<legend>test</legend>
space
space
<br> space
<br> space
</fieldset>
</div>
CSS
.sam
{
overflow:scroll;
}
thanks..
You need to set the height of .sam. Otherwise it will just grow with the content. Also, you can use overflow: auto to have the scrollbars show up as needed.
if you use overflow must use the height otherwise the form will be extend to outward from the field set
I would like to know if it is possible for block elements, floated in a direction, not to wrap when they exceed the width of the parent element.
That was the quick and short question, for a little more details and an example, please see below.
I have done some research about this and I have not found a definite answer of whether it is impossible or not and that is why I am looking for a definite answer here of whether this can be done or not.
And in the case that it is not possible, I would appreciate a quick explanation about it so that I can improve my understanding of how CSS works.
Please see the following example.
I have 1 "container" div and inside it I have 3 "row" divs. Let's say the "container" has a hypothetical width of 200px and each "row" has a hypothetical width 100px. These values are not specified in the css, they vary based on the content on the page.
Each "row" is floated to the left so that they appear horizontally.
<div class="container">
<div class="row">
Some text
</div>
<div class="row">
Some text
</div>
<div class="row">
Some text
</div>
</div>
.row {
float: left;
}
In this case, when the total width of the "rows" exceeds the width of the "container", is it possible for the "rows" not to wrap and to remain in a single horizontal line ?
Just to emphasize, I cannot specify an exact width for the "container" in the css because I want the layout dynamic in order to accommodate different content.
Thank you.
The behaviour you're looking for can be achieved by replacing float: left with display: inline-block, and having white-space: nowrap on the parent container.
See this fiddle: http://jsfiddle.net/XYzea/1/
Blocks inside the container are aligned side by side (like float) but their parent has no width specified. By the way, the wrapper encloses nested divs. inline-block works in all modern browsers except IE<8 in which is not possible to use that display property with any hack if the element is a natural block element
The only way I can think of is to have the container > wrapper > rows. The container can be dynamic in size and have overflow:hidden while the wrapper will keep the rows in a single line
To explain my problem, I'm trying to make a div wide enough to accommodate a dynamically generated title without wrapping it, but the div also has other content, which I want to wrap.
In other words:
CSS:
.box {
min-width:170px;
}
.box span.title {
font-size:24px;
white-space: nowrap;
}
.box span.text{
font-size:10px;
white-space: normal;
}
HTML:
<div class="box">
<span class="title">Title on one line</span><br />
<span class="text">This is the main body of text which I want to wrap as
required and have no effect on the width of the div.</span>
</div>
However, this is causing the div to expand to be wide enough to contain the main body of text on one line, which I want to wrap. I've tried various arrangements for CSS and the putting them all inside container divs and the like but I can't seem to get the box to be exactly wide enough to contain only the title without wrapping (but not less than the min width)
Is there any way to do this just in CSS? Note I don't want to set a max width as this just causes it to become a static size again, as the main body of text is always going to be enough to hit the max width. I also can't line break the body manually as it's dynamically generated.
Is this (jsFiddle) what you're trying to accomplish?
I just added display: table; to .box's CSS. This expands the main div to the width of the title span but wraps the text span.
Note: You can also set a constant width to prevent the div from expanding to the width of the window. This way it will still expand to the width of the title if it is larger than your constant width, but will not grow if the user drags out the window. In my example I added width: 100px; to demonstrate.
A working jQuery example:
http://jsfiddle.net/8AFcv/
$(function() {
$(".box").width($(".title").width());
})
For headlines you should use the <hN> tags (<h1>, <h2> etc).
For no text wrap:
white-space: nowrap;
On the element who's text you don't want to wrap.
Working Example on jsFiddle
If i understand your correctly you can easily set the same width for yours text as for yours title using JS or jQuery, for ex:
$('.text').width($('.title').width())
and run it at jQuery(document).ready or by event if you add it dynamically
Block elements such as divs extend as far as content pushes them, unless specified by explicit widths or heights.
A pure CSS solution for this is unlikely without setting a max-width on the div.
A pointer on CSS:
Don't include the tags in your selectors (i.e. tag.class) as you are then forced to use that tag with that class. Simply using .class will make it easier to change your markup (should you need to) as well as make your class extend its use to more than a single tag.