1

Right, worst question in the history of web design. Who cares, just choose an option. So my question is like this...

What is the best answer to be standards compliant and (backwards) browser compatible?

jQuery used for layout which is supposed to be reserved for css and html
OR
Negative margin, extra containers , or other hacks or bloat?

Already spent too much time on this but looking for the "professional" way to do it.

EDIT: Here is a code example using Alexander's method.

Community
  • 1
  • 1
csi
  • 9,018
  • 8
  • 61
  • 81

4 Answers4

1

There are many ways of successfully doing that, I think the easiest one of them is to simply wrap them all in a common parent container, set his display to table or table-row No need for parent at all. and set the original <div>s to display: table-cell;

jsFiddle.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • 1
    It depends how far back he needs to be compatible with. As IE7 doesn't support `table-cell` or (I believe) `table-row`. – ayyp Aug 08 '11 at 18:57
  • Maybe it has been too ingrained in me but I feel that is similar to using a table for layout as display table tells the item to [display as a table](http://www.quirksmode.org/css/display.html) – csi Aug 08 '11 at 21:02
  • No, the difference between this layout and a table-based layout is about 2-3 extra elements (for this layout specifically), here, you are using 3 divs one after another, which is legitimate. However you style your CSS, your markup remains clean. – Madara's Ghost Aug 09 '11 at 16:27
1

Usually I use pure css/html solution which works in 99% cases:

I have a parent div with background-repeat on 'Y' axe. The general structure is going to be like this :

html:

<div id="container" class="clearfix">

    <div class="LeftPane"></div>
    <div class="CenterPane"></div>
    <div class="RightPane"></div>

</div>

css:

#container{
    background:url(imagePath) 0% repeat y;
}

for background image you can apply image for the borders, or everything else what can make users to think that all 3 blocks have the same height

AlexC
  • 9,657
  • 17
  • 64
  • 98
  • That's a great fix. Even though it causes a server request, it [validates](http://jigsaw.w3.org/css-validator/). I didn't think it would validate with an "empty" image? – csi Aug 08 '11 at 21:00
  • OK, I can't make this work... Are you suggesting to [use a background image - faux columns](http://www.ejeliot.com/blog/61) or use an "empty" url containing only the imagePath? – csi Aug 08 '11 at 21:31
0

I have come up with a revolutionary new method for equal height columns. It is a pure CSS/HTML solution, tested in the latest Chrome and Firefox, and IE7-9. It is a bit tricky to set up but once it is done it works beautifully. The problem with every previous solution I have seen is that it doesn't actually create individual, side-by-side divs that can have their own borders, margins, etc. Other solutions always have some columns overlapping which means you can only contrast the different columns by changing the background. This method allows any column to be any height unlike some methods. The secret to its success is using float: right instead of left. If it was floated left you would have issues with extra space on the right causing scroll bars. Perhaps the only down side with this method is that it can be hard to wrap your head around!

Check it out here. http://jsfiddle.net/wRCm6/2/

Moss
  • 3,695
  • 6
  • 40
  • 60
  • I added instructions in the CSS for managing the dimensions when dealing with margins but without margins the numbers are dead simple. On the other hand the CSS assumes equal width columns. With different width columns you will have to think a little harder. – Moss Jan 15 '13 at 22:21
0

For compatibility I'd suggest jQuery. Hacks and extra containers make your code bloated, as you've said, and will end up making it more difficult to edit if changes need to be made. And anyways, HTML is the layout of the page.

ayyp
  • 6,590
  • 4
  • 33
  • 47