We Keep Coding

Howto limit the width of a span?

I wonder if it is possible to give a span a maximum width.
I tried using the following css
display: block;
max-width: 300px;
But the width gets ignored when the text content of the SPAN doesn't fit into the span.
I would like to cut the visible part of the span to the defined max-width.
Is this possible?
Any suggestions?

You'll want to use whitespace: nowrap and overflow: hidden on your span to force it all on one line and truncate the text.
JSFiddle
http://jsfiddle.net/JZYWg/

You have to handle the overflow to avoid expanding.
e.g. Adding:
overflow: hidden; or overflow: auto;

Add overflow:hidden to the css of your span. This will make the text cut off
More info

If I use display: inline-block - the span wraps at 300px or you can use overflow: hidden as suggested by others.
See: http://jsfiddle.net/U6R2A/

How to make content in DIV align vertically

<div id="content">ABC<div>UUU</div></div>
I just want to find some way to align vertically in middle for div#content. Actually I have some solutions. First one is using line-height, however it can not work if there's another div in the div#content. And vertical-align:middle I think just works for table? Is there any other usable solutions?
I try the vertical-align:middle and display:table-cell, the other issue comes,
the width cannot works, i give that div a big width, that can fill out the screen(1438px), but now the width is also that number but just fill out the 1/3 width of screen.
The table-cell seems like make every cell in the screen, but i just want to give them specified length for table cell.

use this for your requirement
#content {display:table-cell; vertical-align:middle}

With display:table-cell declared on your element, vertical align will work.
#content {
display:table-cell;
vertical-align:middle
}

See thorough explanation on vertical alignment for both normal and inline DIVs at http://phrogz.net/css/vertical-align/index.html

Expounding upon other answers using display:table-cell;vertical-align:middle... Table cells cannot have 100% width, but their containers can!
Using a CSS Table
Items with a table display accept dynamic widths:
#existingContainer {
display: table;
width: 100%;
}
#content {
display: table-cell;
vertical-align: middle;
height: 100px; /* example */
}
Say, with sample HTML:
<div id="existingContainer">
...
<div id="content">ABC<div>UUU</div></div>
...
</div>
Using a Clearing Div
Alternatively, putting your table-cell directly into a block element will ensure no inline elements sit beside it:
<div id="newContainer">
<div id="content">ABC<div>UUU</div></div>
</div>
With sample CSS:
#newContainer {
display: block;
}
#content {
display: table-cell;
vertical-align: middle;
height: 100px; /* example */
}

Can't adjust label widths. JQuery

I have such a sketch: http://jsfiddle.net/challenger/upcZJ/.
I found an article http://www.jankoatwarpspeed.com/post/2008/07/09/Justify-elements-using-jQuery-and-CSS.aspx which explains how to adjust label widths relative to the widest one.
But I can't do the same. What have I missed? I've tried do the thing inside an accordion tab and inside aside division.
Thanks!

Your label elements are display: inline (the default) so the width property does not apply.
Set display to something else (e.g. inline-block)

You forgot to add the CSS which was mentioned in the article
label, input[type="text"]{
float:left;
display:block;
}
label
{
margin-right: 5px;
}
.field{
width:100%;
overflow:auto;
margin:5px 0px;
}

Reverse HTML Layout

I will try to keep this as short and specific as I can.
This is what I need to display:
-----------------------------------------
#div1
-----------------------------------------
-----------------------------------------
#div2
-----------------------------------------
This is how I need the HTML structure to be:
<div id="div2">...</div>
<div id="div1">...</div>
The reason I need the second div to be higher in the HTML structure is because when the page is printed in Firefox, I have to use fixed position for an image that is contained in "div2". If "div2" isn't at the top of the structure, the image will be printed on the second page, and therefore cannot be moved to the first page using fixed position (as far as I know).
I cannot for the life of me think how I can do this with CSS2 (maybe CSS3?). I also looked into "Any Order Column" but I don't think that will work since I'm dealing with rows, not columns.
Any help would be appreciated :)
Edit: #div2 cannot be positioned absolutely because #div1 needs to be able to collapse, and therefore #div2 needs to follow.

For this you can use css3 display:box property for this. Write like this:
.outer{
-moz-box-direction: reverse;
-moz-box-orient: vertical;
display: -moz-box;
}
Check this http://jsfiddle.net/phSfD/2/

You can do it like this.
HTML:
​<div class="outer">
<div class="a"> [div a] </div>
<div class="b"> [div b] </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
CSS:
.outer { position:relative; }
.a { position:absolute; top:100%; }
​Test it out: http://jsfiddle.net/phSfD/1/
The benefit of this approach is you don't need to know the sizes of either element for it to work.
This works because the height of the outer element is determined by the height of its contents. Since div A is absolutely positioned, it doesn't affect the height of its container, so the container's height is the same as div B's height. Setting A's top to 100% (of the container's height) means it will appear just below the container (and therefore just below div B).

One way to solve this is to set absolute positioning of the two divs. You'll need to have a parent with relative position and then set the absolute position of the two divs: div1 above the div2.
When you do so, remember to indicate in the <style> tag that these styles only apply to the on-screen rendering and provide a separate set of styles for printing, so that on print div would would appear below div2.

When you set position: fixed on an element, it is positioned relative to the browser window, irrespective of its container.
So, this
#div1 img{ position: fixed }
and this
#div2 img{ position: fixed }
will render the same result. You can write them in any order.

You can use display: table-*-group properties for vertical reordering of blocks of arbitrary height (dynamically resized in particular):
<style>
#example {display: table; width: 100%; }
/* Will display at the bottom of pseudo-table */
#block-1 {display: table-footer-group; }
/* Will display in the middle */
#block-2 {display: table-row-group; }
/* Will display at the top */
#block-3 {display: table-header-group; }
</style>
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
Works in all browsers including IE8+ (there is a small limitation in IE8).
For IE6/7 (if they do matter), elements can be swapped with JavaScript.
For details, see my article.

Size of div depending on size of another div

I got a div which contains 2 other divs. They are vertically aligned. Now, the lower div is changing its size via javascript. What I want now is that the upper div is changing its size depending on the other divs size. Is there a way to do this with css style only, without using js?
UPDATE: The outer div has a fixed size.
<div>
<div> childdiv 1</div>
<div> childdiv 2</div>
</div>
UPDATE: Ok I didnt make this clear enough, the lower box is changing its height in top direction. And the upper div should then decrease its height.

You could use display:table and display:table-row to change the height of the upper div accordingly, so that the total height matches the fixed height of the container:
#outer{
display:table;
height:200px;
width:200px;
}
#inner1{
background-color:red;
display:table-row;
}
#inner2{
background-color:green;
display:table-row;
height:30px;
}
You'll find an example here: http://jsfiddle.net/bRg6m/
Is this what you want?
Added: Note that this doesn't work in IE7 or older. You'll have to use a Javascript solution if you want to support those browsers.

I'm not sure I understand your question.
I made an example here where the upper div is changing its width depending on the lower divs size. Is that what you needed?
http://jsfiddle.net/8fwXR/
HTML
<div id="wrapper">
<div id="box1"></div>
<div id="box2"></div>
</div>
CSS
#wrapper {
float: left;
}
#box1 {
background: red;
height: 100px;
width: 100%;
}
#box2 {
background: green;
height: 100px;
width: 400px;
}

Possibly this is what I meant:
document.getElementById("upperDiv").style.width = document.getElementById("bottomDiv").style.width

Really depends on your setup. The easiest way by far would be to just apply the javascript code to both DIVs at the same time.
Setting the width of the first DIV to be 100% should cause it to resize the width to match the second DIV (as the resize will force the parent DIV to increase in width too), but you will have a problem when trying to get the height to match, as with pure CSS the first DIV will have no reference to recalculate its own height to match.
Example Here
Alternatively, instead of making the second DIV resize you could resize the parent DIV and have both children set with CSS as follows:
width:100%;
height:50%;