Make width of all elements equal based on widest one

Question

This behaviour can be achieved using tables, like with this code:

<style>
table {
    table-layout:fixed;
    width:100%;
}
td {border:1px solid red;}
</style>
<table>
<tr>
    <td>Hello</td>
    <td>WWWWWWWWWWWWWWWWWWWWWW</td>
</tr>
</table>

Output of this will be as i want:

|Hello               |WWWWWWWWWWWWWWWWWWWWWW|

But this solution does not wraps elements inside (in this case tds) to new line if it does not fit to screen width! So i would like to do this using divs and css. If i use:

<style>
#eq > div {
    width: 400px;
    float: left;
}
</style>
<div id="eq">
    <div>Hello</div>
    <div>WWWWWWWWWWWWWWWWWWWWWW</div>
</div>

Sure it works and outputs same, but of course text and number of elements inside #eq are variable! So if text "WWWWWWWWWWWWWWWWWWWWWW" will be changed to "lol", elements will be absurdly wide. On the other side, if i change it to longer text then defined width, width of all other smaller elements will be smaller. So final question is: How can i make width of all elements be as wide as widest element with ability to wrap using pure html & css and without manually specifying width?

I'd be surprised if there is a css only solution to this, I'm pretty sure you will need JavaScript or similar to do the calculation, this is very simple to achieve using jquery. — Blowsie, Jun 13 '11 at 12:04
Yeah i think same, but that just shows how css is still poor in certain things against archaic solutions like tables. What a shame. Javascript for common design is evil. — gadelat, Jun 13 '11 at 12:16
JavaScript in design is very common, modern browsers are focusing on JavaScript performance and JavaScript library's like Jquery make it very simple to write effective JavaScript. Anyone with JavaScript disabled in their browser will be the minority. The majority of modern websites rely on and require JavaScript for them to work properly. — Blowsie, Jun 13 '11 at 12:21
Javascript loads after whole DOM loads, which makes page distorted while it loads and increases time needed to wait while page is ready to user. That's why it is evil. — gadelat, Jun 13 '11 at 12:27
Its possible to load JavaScript before the dom has finished loading — Blowsie, Jun 13 '11 at 12:37
Make javascript example for this question which loads before DOM completes and has fallback to html&css for people with disabled javascript and you will get upvote. If nothing better will appear, i will also accept this. — gadelat, Jun 13 '11 at 12:45

score 2 · Answer 1 · answered Jun 13 '11 at 12:15

2

Tables will be the easier option. Have you tried forcing wrap on table cells?

td {
  word-wrap: break-word;
}

I don't think there is a pure CSS/HTML solution to your DIV idea.

answered Jun 13 '11 at 12:15

Tak

11,428
5
29
48

Word-wrap wraps only text inside element, not whole element. In special cases with many elements it would end up with just one-letter lines of text in these elements. – gadelat Jun 13 '11 at 12:35

score 0 · Answer 2 · answered Apr 09 '13 at 18:56

A little late to the party, to be sure, but I've posted a JSFiddle of a solution that's worked very well for me, with or without Javascript:

http://jsfiddle.net/jpgringo/LTEsZ/7/

HTML:

foobar

Wampeter, Foma, Granfalloons

"O Oysters, come and walk with us!"
The Walrus did beseech.
"A pleasant walk, a pleasant talk,
Along the briny beach:
We cannot do with more than four,
To give a hand to each."

=========================================

CSS:

body {
    font-family:Verdana, Arial, sans-serif;
    font-size:10px;
}

#myContentSection {
    display:table;
    width:100%;
}

#myContentSection .content {
    display:table-row;
}

#myContentSection .subsection {
    display:table-cell;
    border:solid 1px gray;
    /* the next line is optional, but gives equal-width columns if you know the 
    number of columns ahead of time */
    width:33%;
    padding:4px 8px;
}

========================================

(optional) JS:

var sectionID = 'myContentSection';
var subsectionClass = 'subsection';

var contentSection = document.getElementById(sectionID);
var colCount = contentSection.getElementsByClassName('subsection').length;
console.log('# of columns:', colCount);
var width = Math.floor(100/colCount);
console.log('column width: ', width,'%');
var css = '#' + sectionID + ' .' + subsectionClass + ' { width: ' + width + '%; }';
var style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

document.head.appendChild(style);

This does not wrap elements, only text and same behaviour can be achieved much easier using tables as i showed in my post. I want this exact behaviour, but with automatically wrapping cells to new lines. — gadelat, Apr 10 '13 at 12:05

Make width of all elements equal based on widest one

2 Answers2