How to use one background Image for a main div which have two div, one on left and one on right.

Question

Hi, I want to make an HTML, CSS page where the layout is as:
<div id="content">
<div id="left">
.....
</div>
<div id="right">
.....
</div>
</div>
The content div has a background image which should be repeated in y-direction. Also the left and right div should be side by side over the same background image.I am able to accomplish it but by keeping the height of the content fixed but I don't want to make the content's height fixed. Please help me folks. Thanks in Advance :)

Answer 1

Try looking in to something like this:

http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

Answer 2

without seeing your code... my guess is you're floating the left and right DIVs... but you're not floating the content DIV...

your CSS should look similar to this to make it work:

#content {
    float:left;
    background-image:url('whatever.png');
    background-repeat:repeat-y;
}

#left {
    float:left;
}

#right {
    float:left;
}

Answer 3

I am able to accomplish it but by keeping the height of the content fixed but I don't want to make the content's height fixed.

If you are able to repeat the background image in the Y direction then it shouldn't matter how heigh the #content div is, as your background will just fill the remaining space - correct?

If your content div is not expanding to the height of the child div's then clearly #content must be outside of the normal flow of the page, in which case you should float it and not set a height for the container div.

Answer 4

It's quite hard to understand what you're trying to do, but I think what you want to do is add overflow: auto to your content div, so that it becomes the same height as the left and right divs:

#content {
  overflow: auto;
  background: [bg code]
}
#left, #right {
  float: left;
}