ansaurus

Question

Answer 1

A:

At the risk of angry comments and loss of reputation - use a table to contain your layout. You get the full-height borders free - they will automatically adjust to the same height as your content.

<table>
  <tr>
    <td class="bgr_left"></td>
    <td class="content"></td>
    <td class="bgr_right"></td>
  </tr>
</table>

Ray 2009-10-25 18:58:57

There´s really no need to have empty elements in your markup just to get a background; table, div or any other element. There are always exceptions of course, but this is a pretty simply layout...

jeroen 2009-10-25 19:26:28

@Jeroen, having up-voted your comment, I've since *thought* about it. I don't think he was suggesting having *empty* elements, he was just demonstrating the mark-up structure without putting in `` type filling to the table cells. ...having said that, I don't agree with using tables for layout purposes, however easy it appears.

David Thomas 2009-10-25 22:35:15

@ricebowl, the class names of the columns suggest that they are there only for the background. I agree with the not-using-tables part, in my experience everything is done more easily and flexibly using div's / css, but my comment was not just meant for tables, the extra div's the OP uses are redundant as well.

jeroen 2009-10-26 00:49:21

Answer 2

A:

If you have a fixed-width design, you could just use one background image, either on the body or on your content container, depending on the effect you want. This image would be something like:

(left bar)-> | ([x]px space here) | <-(right bar)

With repeat-y, this would give you:

|                |
|                |
|                |
|  content here  |
|                |
|                |
|                |

Then the bars will be as high as your content. If you apply this to <body>, then it will have the height of the body.

Hope this helps.

stephenhay 2009-10-25 18:59:12

Answer 3

A:

There doesn´t seem to be a reason to use a separate div for the background as it´s empty, but it depends if the column width is fixed.

You should apply the background image to the div you want to have a background, that way you can be sure that it will continue below as the div grows.

If your column width is fixed, you can just combine the left and right image in a very wide image that will only repeat vertically.
If your column width is variable, you can have for example the left background in the growing div and the right one on a wrapper div that contains the growing div.

Using the right padding you will get the effect you want.

jeroen 2009-10-25 19:22:16

Answer 4

A:

Alternativly I'd suggest to wrap another two divs around content container and repeat the background aligning it in one div to the left and in the other to the right. I.e.:

<div id="left_wrapper" style="background: url(my_leftimage.png) y-repeat top left;">
<div id="right_wrapper" style="background: url(my_rightimage.png) y-repeat top right;">

  <div id="content">hello world</div>

</div>
</div>

Then if you want it to go height 100% set the html, body and the content containers to 100% height like this in the CSS:

html, body, #content { height: 100%; }

Hope this helps :)

jnpWebDeveloper 2009-10-26 02:16:57

ansaurus

tags:

views:

answers:

Side border and dynamic content help

related questions