Develop Reference

Align cell heights in parallel tables

I have two tables sit next to each other and display data about two items that are being compared. Each item has a name, a category, and then a description - some descriptions (the third column) are very short (one word) and some are very long (multiple sentences). I need to align the two tables so that the row heights match up perfectly. Here's what I have so far:
Notice how the first row in each table doesn't align because of the difference in heights in the row. Ideally I'd love to solve this with CSS and some kind of overflow property combined with min-height, but I'm not sure where to start. Thanks!

You can place the description text (2nd table) inside a "div" in "td" and
make the "div" css: "overflow:auto; max-height:40%"; and make changes to the width of the table data as required for the both tables.

You can use the height property to give each cell in the table a uniform height.
Setting the overflow-wrap property to break-word will break a long word that does not fit inside the cell (like supercalifragilisticexpialidocious) so it fits. You need to style it as an inline-block so the overflow works properly. If all else fails and there is just too much darn text in a table cell, you could set overflow to hidden to make sure that your users can at least see the content without it spilling over everything, but ideally you should set the height to be large enough for your data. If you need an example, let me know and I can post one.

Overflow property on TD elements in an HTML Table

I am using HTML tables to show my data in tabular form. I know that the
Default behavior of td elements in a table is that they change their width and height in order to accommodate the text inside it i.e. like that shown in figure (A)
Is it possible that I some how achieve the effect as shown in figure (b) , i.e. I would like to modify the td elements using CSS in such a way that it gets the shape as that in Figure (b) i.e. maintain it's width and height but makes the text inside itself overlay the sibling td elements?
PS: Have tried fixing the width and height plus using the overflow property of CSS but that didn't work.
NOTE
I don't want to use the colspan property, i.e. I still want the sibling td to be there (of course, they won't have any content inside them).
The reason Why I want to achieve this is I'm using jQuery plugin Datatable and this doesn't work with the table having tds that are using colspan property

Finally, using #teemu suggestion, i.e.
Using an absolutely positioned extra element into td

Dropdown menu css to expand the width based on content

I was trying to create a dropdown that had dynamic values, basically there are 5 text boxes and a drop down on a page and the dropdown gets the values from those textboxes. If the user enters some text that is bigger than the width of the drop down then it is skewed on IE.
I fixed that by select:hover{width:auto;position:absolute}. Now the problem is if the user enters values that are all smaller than the original size of dropdown it contracts, I want a way so that it doesn't contract and still expands. Any thoughts??
I am using dojo and javascript, cant use jquery.

In JavaScript find the max width of the text, if it is bigger than the dropdown's current width, change the width to the max width of the text.
This will work like you desire (width not contracting) when you change the text again, because the JavaScript will find the max width of the text to be less than the dropodown's, so the width will not change.

Simple fix would be to pick a width for your Dropdownlist and set max and min lengths to your textbox values so you can control over the size of your submissions. Otherwise i could type in anything.

Ill get you back to 0 on your question and provide a solution.
Use CSS. On the select box set a width and even if the content in it is smaller it wont get smaller.
<select style="min-width:200px;" id="someUniqueIdentifier">
/* Your dynamicaly generated options*/
</select>

The most simple solution if I have read the question correctly would be to use the min-width property (developer.mozilla.org/en-US/docs/CSS/min-width) like so - select { min-width: 50px; width: auto; } - This would allow the width of the control to expand as needed but not to fall below the minimum width you defined. This could be defined on the :hover state selector, but would work just as well (and I would suggest) on the element itself. IE8+ support, no JavaScript required.

forcing a definite size on a select multiple element

When a select multiple element is empty (without any options), the dimensions of the element become zero and shows only the scroll bar , also the element resizes according to the size of the data of the options . How can i create a select multiple element with a definite size which does not change irrespective of the above two factors?
Thanks in advance

Use CSS:
select.multiple {
width: 200px;
height: 400px;
}
The above assumes your select has class="multiple", but obviously you can set your CSS selector to ID or whatever suits, and of course you'll set the dimensions and units to suit your specific case.

How to regulate height of LIs?

I have a UL where the LIs are boxes. I want the boxes to all be the same size, but sometimes the boxes are one line, and other times they're two. how do i add an extra empty line in the LI if the content is only one line? I'm assuming this will be some sort of javascript?

Without seeing any of your HTML markup, you could use CSS height or min-height properties. The latter will only work in the latest browsers, e.g. not IE6.

You should just give them all a certain 'height' or 'min-height' attribute instead of trying to fix a height that is automatically rendered to them.
Try posting some of your html so we can help you more though...

Maybe this could suffice?
line-height: 2em