2
\$\begingroup\$

The Holy Grail Layout in CSS, is a full height, 3 column layout which consists of a fluid central column, and two side columns with fixed widths.

Your Task is Simple!

Reverse it, make a fixed width central column, and two fluid width columns to the sides. The point is for them to take All available space both vertically and horizontally. So if one adds elements above, or elements below (assume 100% width), your solution should shrink to accommodate. Same goes with elements on the sides. Your layout should fill 100% of its container's space.

Restrictions

  • HTML and CSS only (no JavaScript)
  • IE8+ support mandatory
  • Must work in all major browsers (it is, after all, a layout!)
  • HTML and CSS must both be valid.
  • No tables, it's supposed to be a layout, not an abomination.

Winner

  • Code with fewest characters wins, excess spaces and newlines do not count, don't be afraid to be readable! (I'm running the solution through a minifier)

Good luck!

Improve this question
\$\endgroup\$
7
  • 2
    \$\begingroup\$ The specification is a bit vague, but on the assumption that it can be tightened up, how would you pick a winner between two solutions? All questions on this site should have an objective primary winning criterion. \$\endgroup\$
    – Peter Taylor
    Commented Sep 7, 2013 at 22:06
  • \$\begingroup\$ Well, with the lack of a better criterion, I'd say it would be shortest code possible. I'll edit it as soon as I get to a PC. \$\endgroup\$
    – Madara's Ghost
    Commented Sep 8, 2013 at 4:31
  • \$\begingroup\$ How about providing a list of browsers to support, then score by the following? [code size] / [number of actually supported browsers] \$\endgroup\$
    – Hand-E-Food
    Commented Sep 8, 2013 at 22:15
  • 1
    \$\begingroup\$ I think the current attempt at an answer validates my comment that the specification is a bit vague. Can you give a precise definition of what counts as a "column"? \$\endgroup\$
    – Peter Taylor
    Commented Sep 9, 2013 at 8:46
  • \$\begingroup\$ @PeterTaylor As always: Proof by example. I don't know yet if this is counter productive or not. \$\endgroup\$
    – Johannes Kuhn
    Commented Sep 9, 2013 at 8:53

3 Answers 3

Reset to default
2
\$\begingroup\$

Simple

<div style=float:left;>L</div><div style=float:right;>R</div><div style="width: 100px;margin:0px auto;">C</div>
  • Who said that it needs to be valid html?
  • Who said that I need a doctype?
Improve this answer
\$\endgroup\$
1
\$\begingroup\$

display:table-cell is compatible ie8+ (as seen in caniuse)

<!DOCTYPE html>
<head>
  <title>a</title>
  <style>
    html { height: 100%}
    body { margin: 0; display: table; height: 100%; width: 100%}
    .c { display: table-cell }
    .c2 { width: 6em }
  </style>
</head>

<a class="c c1">a</a>
<a class="c c2">z</a>
<a class="c c3">e</a>

This is html/css valid, tried here : https://validator.w3.org/nu/#textarea

That's why there is head/title stuff. But you can ommit html/body, according to the specs.

The issue I see is when you want to put something above/below, you have to make them display: table-row, and probably specify a height.

Improve this answer
\$\endgroup\$
1
  • 2
    \$\begingroup\$ Why the downvotes ? Based on (not so clear) requirements, this answer is quite acceptable \$\endgroup\$
    – sodawillow
    Commented Nov 13, 2015 at 8:18
0
\$\begingroup\$

Guaranteed to work in all browsers - old and new:

<table>
<tr>
    <td>a</td>
    <td class="f">b</td>
    <td>c</td>
</tr>
</table>

CSS:

table, tr{
    width: 100%;
}
.f{
    width:100px;
}

Here's a fiddle: http://jsfiddle.net/8QWBX/1/

Note: if you want to make it shorter (but fail HTML standards) you may remove the tr tag and its styling. This will save 12 characters the way I see it.

Improve this answer
\$\endgroup\$
1
  • 4
    \$\begingroup\$ Table for layout? I feel ill. \$\endgroup\$
    – Gareth
    Commented Sep 9, 2013 at 13:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.