ansaurus

Question

CSS challenge: Two background images, centered column with fixed with, min-height 100%

Answer 1

A:

[revamp]

I'm silly. Very.
Problem: body needs to have bg images, #main_container needs to have 800 width and in the center.
(Lousy approach: I was doing #main_container with bg images, not centered, 800px.)

New approach: I suggest a div inside body and a span inside that new div:

<body>
<div>
<span>
  <div id="main_container">
    Regular contents.
  </div>
</span>
</div>
</body>

Then:

body {
  background: url(img/bg_left.gif) repeat-y top left;
}
body>div {
  background: url(img/bg_right.gif) repeat-y top right;
}
body>div: {
  text-align: center;
}
body>div>span {
  display: inline-block;
  /* IE only likes this rule on elements that are inline by nature, thus the use of span.
  I'm not sure 100% height will work on #main_container. */
}

And your regular rules:

#main_container {
  background-color: white;
  margin: 0 auto;
  min-height: 100%;
  width: 800px;
}

ANeves 2010-04-05 14:17:09

The two background images are meant to be behind the #main_container. The #main_container itself has solid white background.I think the first version of my question wasn't accurate enough - sorry 'bout that. I rephrased it now.

laurent 2010-04-05 14:45:50

I'm sorry, I don't understand. If you're saying that the `#main_container` has something inside with solid white BG that you can't change, then of course no background on any parent would ever show. Care to be more specific? I'll edit my answer to be more explicit.

ANeves 2010-04-05 15:16:41

I was reading it all wrong... revamped the answer to actually **meet** your problems. Sorry for the mess-up.

ANeves 2010-04-05 15:55:34

The `>` selector does not work in ie6. Just use a class to be safe.

Joel Potter 2010-04-05 15:59:59

Thanks a lot for your inputs! I am afraid the minimal height of 100% doesn't work for the #main_container...

laurent 2010-04-05 16:09:39

@Joel Potter: IE9 is around the corner... why must we still talk about IE6? =|

ANeves 2010-04-05 16:24:10

@laurent: go for Joel Potter's solution. Simple, effective. I like that `margin: 0 auto;` thing, it's news to me. :)

ANeves 2010-04-05 16:25:44

unfortunately Joel's solution doesn't properly handle the min-height requirement (see comments to his answer)

laurent 2010-04-05 16:40:16

@sr pt, Because it's still a 10% browser unfortunately.

Joel Potter 2010-04-05 17:08:21

Unfortunately - my point exactly.

ANeves 2010-04-05 17:23:29

Answer 2

A:

Using a "layout table", my issue can be solved. A pure CSS solution, however, would be preferred!

Here's a working table-based solution:

table.layout {
  border-collapse: collapse;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

table.layout td {
  margin: 0;
  padding: 0;
  vertical-align: top;
}

td.layout_left {
  background-image: url('background-left.png');
  background-position: top left;
  background-repeat: repeat-y;
}

td.layout_center {
  background-color: white;
  width: 800px;
}

td.layout_right {
  background-image: url('background-right.png');
  background-position: top right;
  background-repeat: repeat-y;
}

And the HTML code:

<table class="layout">
  <tr>
    <td class="layout_left">&nbsp;</td>
    <td class="layout_center">
      <!-- content -->
    </td>
    <td class="layout_right">&nbsp;</td>
  </tr>
</table>

laurent 2010-04-05 15:07:58

Answer 3

+2 A:

Modified:

<body>
  <div class="container"><div>
  <div id="main_content"></div>
</body>

With css:

html {
  height: 100%;
}
body {
  background: url(left.png) repeat-y top left;
  background-attachment:fixed;
  height: 100%;
  margin: 0;
  padding: 0;
}
div.container {
  background: url(right.png) repeat-y top right;
  height: 100%;
  width: 100%;
  position:fixed; /* This won't work in all browsers. May need a JS solution for IE6 */
}
#main_content {
  height: 100%;
  width: 800px;
  margin: 0 auto;
  background-color: white;
}

Edit:

This version works for browsers that support position:fixed (not ie6).

Example page: http://jsbin.com/ebozi3/4/edit

Joel Potter 2010-04-05 16:05:05

Hi Joel, thanks for your answer. The problem with your solution is the div.container height. The container remains at 100% even if there's more content.

laurent 2010-04-05 16:12:57

+1 @laurent: removing the `height: 100%;` from `div.container` should make it work as you want.

ANeves 2010-04-05 16:23:18

removing the height or replacing it by min-height works with content longer than 100%. but then white column doesn't stretch when the content is smaller than 100%.

laurent 2010-04-05 16:36:47

ansaurus

tags:

views:

answers:

CSS challenge: Two background images, centered column with fixed with, min-height 100%

related questions