CSS image design problem

Question

Hello!

This is the testsite i am working on: http://test.pafo.net/

As you can see, it cuts the middle line in half and i am trying to sort out why it does that. The body backgroundcolor is just for testing.

The layout idea is

<div> - entire box
  <div /> - top (image with the start line)
  <div> - content
    <div> - left (test 2 on the page)
    <div> - middle (this is 12px in width and only has the line in it)
    <div> - right (menu on the page)
  </div>
  <div> - bottom
    <div> - left (copyright)
    <div> - right (end of the line)
  </div>
</div> - end box

Another thing is Firefox. If i got an empty div (like the middle div above) then i need to add a space in it for Firefox to show it. If i got nothing in it, then Firefox won't show it.

Answer 1

.site_middle {
    height:100%;
}

A hundred percent of what?

Percentage heights (of non-positioned elements) are relative to the parent element, site_page, which is height: auto. So the parent's height is the total height of its children, which is dependent on its own height, which is dependent on the child height, which is dependent on the parent height...

CSS breaks this deadlock by saying that percentage heights relative to auto are ignored, ie. they are also auto. Which is why you get an element whose height is only as big as as the nbsp you've put inside it (and whose height is zero when you don't put anything in it).

If you want an image repeated along the side of the site-left div, however long that happens to be, use a right-positioned background image on that element, rather than creating an extra element for it.

Answer 2

You can fix the issue by putting the repeating image in your site_page CSS class, as this has the height that you need:

.site_page {
    background:url("../images/bg/bg_main_middle.png") repeat-y scroll 788px 0 #FFFFFF;
}

You can then get rid of the site_middle div.