I am trying to increase the width of #Item, but it increases only with text width.
HTML
<div><span class="Item">Brand Strategy:</span><span class="Summary">Strategy</span></div>
CSS
.Item{background-color:#000; height:40px; color:#FFF; text-align:center; width:200px;}
How do I get the specified width for #Item.
Thanks
Jean
I wrote part of this in comments above, but rewriting here for further clarification.
<span> is an inline element. Inline elements can't have a fixed width; their width is determined by the width of the text they contain, plus the margins and paddings.
See CSS fixed width in a span
You can change this behavior by turning your span into a block-level element. This is done by setting display: block or display: inline-block. But this also introduces other behavior, such as floating and taking up a whole line instead of staying inside the paragraph. This, again, can be countered by float: left and similar options. Weigh the different options and decide based on your needs.
In your specific code example, you might benefit from using <dt> and <dd> tags instead. They were built for exactly that purpose.
The span is inline element, you can not apply width or height to it unless you make it block-level element like this:
span.Item{
display:block;
background-color:#000;
height:40px;
color:#FFF;
text-align:center;
width:200px;
}
Or you can set the display to inline-block to support old dumb IE versions.
More Info:
Block-Level vs. Inline Elements
Alternatively, you can use a div to apply the width if you want.
You can use display: inline-block , if you use display: block you will have to float: left as well.
The span is an inline element, so the only way to change its width is to make it a block element or setting its display to inline-block. After doing this, you should float it to the left.
I hope this was of help.
The <span> element in an inline element. Therefore, you cannot apply width or height.
Related
How can I break a line in a span once the width of the span is reached? I tried max-width, but this did not work, the span is always as long as the text.
Ideas?
Thanks!
By default, <span> elements are 'inline', and will always grow to the size of their content. You need to explicitly declare the <span> to be display: block; or display: inline-block;.
span {
display:block;
width:150px;
word-wrap:break-word;
}
span is an inline element, meaning, it is wrapped around text (or other inline elements). It is not subject to width or height.
You want a block element, like a div, or maybe an inline-block element (achieved by setting display: inline-block on an element).
http://jsfiddle.net/antonpug/jfrNt/
I am trying to make all the buttons the same size, and I am setting width to 100, but it doesn't do anything. Ahh! So frustrated...
modified a bit,
you need to use percentage and set it in the <li>
make the <a>'s display:block to fill in the whole <li>
added box-sizing:border-box (CSS3) to include the border in width calculation
replaced display:inline with float:left. elements styled with display:inline CANNOT have dimensions (width and height) and top and bottom padding and margins will not move it away from the text baseline (not move it vertically). Elements floated left seem to automatically have display:block
changed IDs to classes since IDs can only appear once
You're setting width:150px on the #menu_item declaration which is targeting the id of menu_item. For one, you can't have more than one element in a page with an id="menu_item" attribute.
What you need to do is set the tag inside those divs to display:block as it is by default an in-line element, then you can specify a width on it.
Don't use the same ID multiple times.
You can't set a width or margin on inline elements.
Here's an updated jsFiddle with the following changes:
Changed to .menu_item class.
.menu_item is now display: inline-block.
.menu_item a is now display: block.
I'm not sure if the margin on the top is supposed to be there, but you can remove that if you want.
This works if you want fixed widths, JSFiddle
had change your divs to use class not id,
.menuitem is now display: block and float: left;
.menu has a min-width to prevent wrapping of the menu items.
http://jsfiddle.net/XKL6E/
How can I centre these images so they form a pyramid (overlapping each other halfway)?
If you don't care to support IE7, you can use display: inline-block instead of float: left and just center the whole chunk: http://jsfiddle.net/XKL6E/16/
Add display:inline-block to .empty-button, and text-align:center to .button_row:
http://jsfiddle.net/XKL6E/14/
If you change all of the buttons to span elements instead of div, you can apply the display: inline-block to them.
Credit to #Blender for the inline-block idea and the original version of this fiddle.
http://jsfiddle.net/XKL6E/21/
Edit:
I forgot to mention, the difference between inline-block on a div and a span element is IE7 support. Articles like this one give all sorts of hacky ways to make this work. In the case of div elements, substituting span is good enough.
Using fixed width divs and centring them automatically with
margin-left: auto;
margin-right: auto;
The fixed width is dependant on the width of the images. If the image width is always the same, which I assume in your case is, you can multiply the width by an integer ( use jQuery .css(attr,value) selector ).
How can I align text in the vertical middle of a Div element provided it has a position:absolute property specified?
Setting display:table-cell; vertical-align:middle; isn't working.
Thanks!
Wrap an inner div and give it position:relative; top:-50%; in addition to giving the absolute a top:50%.
Though of course if it's complicated styling, please provide your CSS.
You can get away with line-height if it's just a single line of text, you'd have to kill the absolute rule though.
I have this CSS and I cannot set the width on a span element. Any ideas what I am doing wrong?
#address-readonly
{
margin-left:150px !important;
padding-left:100px;
}
I am using this in 2 areas in my application. Here is the first area:
<tr>
<th colspan="2">Address Details</th>
<th><span id="address-readonly" class="address-readonly"></span></th>
</tr>
And here is the second area:
<div id="addressHeader" class="addressHeader">
<span>Address Details</span>
<span id="address-readonly" class="address-readonly"></span>
I want the address-readonly span to be more right aligned. The padding/margin combo has almost no effect. What should I be doing here? I don't want to add a bunch of non-breaking spaces, but that's basically the effect I am looking for. This particular client has an office full of IE7 machines, so no FireFox or Safari etc... I have tried setting the width of the span as well.
Try this:
#address-readonly
{
display:block;
float:left;
margin-left: 150px;
width: 100px; /* If you want to set the width */
}
or you could use a div and not set the display attribute.
If applicable, you could try using display: block:
#address-readonly {
display: block;
width: 200px;
}
Without floating, the span will be on it's own row. Hope that helps.
Your only choice is a display value of block or inline-block, because inline elements are resized by their content. Also, please note that inline-block is not that well supported.
Guillaume's and Wicked Flea's answer complement each other, but some points are missing.
Only "box elements" can have its width/height attribute set. Span is a inline element, so it will resize it self to fit content.
So, if you want your elements to have width set, you should use a box element. The problem here is that box elements do not line up in the same row by default. You can then use float and margins to align a box element with another box element.
All that being said, it would be good to use Guillaume's answer. BUT some quirks may appear, check this link link about clearing floats.
What would I do: Use the workaround presented in the link, then use both spans as divs, and have them floated to the left, with your widths and paddings set.