Make all column elements of the same width, without `display: block` or` width`

Question

I have a webpage with three green boxes, each on its own line. Each green box also has an associated red box that appears when you hover over the green box. All green boxes are contained in a black box that is wide enough to contain the widest green box.

Jsfiddle

Question

How can I expand shorter green fields to fit the width of the widest green window? Here is the version of MSPaint that I would like to see:

The browsers I'm testing with

At a minimum, I want to support Internet Explorer 7, 8, and 9. Firefox is optional. I am not interested in supporting any other browsers.

What have i tried so far

I have made several attempts to achieve this, but I cannot get it to work the way I want it to. (Feel free to skip the following parts if they are boring.)

Attempt 1

I gave each green block a display:block style and removed <br/> between them.

Jsfiddle

Green boxes successfully changed! However, now each red square appears below the corresponding green window, and not to the right. I don't know if there is a way to put the red box on the same line as the block element, so I abandoned this approach.

Attempt 2.0

I gave each green box 100% width and deleted <br/> between them.

Jsfiddle

(Ignore the gap between the green and red fields because there are gaps between the two spans and are easy to repair.)

The green rectangles are the same size, but they are about 50 pixels wide and they extend beyond the end of the black box.

Additional browser issues:

• In IE7, all fields are displayed on one line.
• In Firefox, red fields appear under their corresponding green box.

Attempt 2.1

From the item "Error 2.0" I deleted the gasket green boxes. Padding is a very powerful “it would be nice to have” function, but I will break it if it literally does not exist.

Jsfiddle

The green boxes expand 1px beyond the end of the black box, which is annoying but not unacceptable. The boxes are still too wide. All issues related to browser 2.0 are still valid.

Attempt 2.2

From attempt 2.1, I added <br/> s again.

Jsfiddle

Green rectangles are the right width, give or take a pixel!

Browser-specific updates:

• Boxes appear on their lines in IE7, but they do not have the same width.
• Firefox still displays red rectangles in the wrong position. In addition, there are large gaps between adjacent green boxes.

Attempt 2.3

From Attempt 2.2, I changed the width to 99%.

Jsfiddle

The green boxes are slightly shorter than the black box, which is acceptable. So far they have the same width.

Browser-specific updates:

• In IE7, the boxes still do not have the same width.
• Firefox works great.

So, at the moment I have 75% browser compatibility. However, it seems that no configuration will make IE7 work, so I abandoned this technique.

TL DR

the size of the margins to fit the column is usually not too complicated. But normal methods fail when the boxes have a fixed pixel width and absolutely positioned siblings that should appear on the right. I am looking for a method that will work in these specific circumstances.

Answer 1

I checked that this demo works in IE7 + and modern browsers:

http://jsfiddle.net/thirtydot/APVuq/4/

CSS

 .hoverBox { position: relative; } .visiblePart { display: block; border: 1px solid green; padding: 5px; white-space: nowrap; } .hiddenPart { display: none; border: 1px solid red; position: absolute; left: 100%; top: 0; white-space: nowrap; } .hoverBox:hover > .hiddenPart{ display: block; } .enclosingBox { border: 1px solid black; display: inline-block; *display: inline; zoom: 1; } 

HTML:

 <div class="enclosingBox"> <div class="hoverBox"> <span class="visiblePart"> Box 1 </span> <span class="hiddenPart"> Hidden part of Box 1 </span> </div> <div class="hoverBox"> <span class="visiblePart"> Box 2, which is much wider than box 1 </span> <span class="hiddenPart"> Hidden part of Box 2 </span> </div> <div class="hoverBox"> <span class="visiblePart"> Box 3, which <br/> is split into two lines. </span> <span class="hiddenPart"> Hidden part of Box 3 </span> </div> </div>​ 

Answer 2

I just can't believe what I'm going to write, but why not use the good old <table> ? With 2 columns and 3 rows, the second column contains your red boxes ... This should make it pretty easy.