8 replies [Last post]
VanDiesel
VanDiesel's picture
Offline
newbie
UK
Last seen: 5 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2009-06-08
Posts: 6
Points: 0

Hi everyone

This is my first post here (please be gentle) - I'll try and obey the rules.

I'll try to make this explanation simple, as my page is complex.

I have two divs side by side - The right div holds text that can be of any length.
The left div is empty, but expands in height according to the right div.

I am trying get the left div to display a background image, tiled vertically - But unless that div actually has something in it (whether it be text within that div on the page, or a 'width:100px;' statement in the CSS, the background is not shown.

When I DO place something in the div, the background is only shown for the height of the contents of what is in it - I need the background to fill the empty div, and dependant on its own height in relation to the text in the right content div.

Here is a snippet of my code - It is quite a complex page, so I don't include it all.

html {
margin:0px;
padding:0px;
height:100%;
}
 
body {
padding:0px;
margin:0px;
height:100%;
}
 
/* ----------container - Hold both left and right divs-------------- */
#container {
width: 974px;
height:100%;
margin: 0 auto;
}
 
The div is called such:
<div id="submenu"></div>
 
Here is my CSS:
 
#submenu {
width: 246px;
height:100%;
background-image:url(../images/leftsubbckgnd.gif);
background-repeat:repeat-y;
}

I was thinking that height:100% would make the background fill the empty div, but it doesn't.

Could anyone help, please? I have spent several hours trying to work it out.

Best wishes
Chris

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 4 years 27 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Why donot you try to keep

Why donot you try to keep min-height for that div.

VanDiesel
VanDiesel's picture
Offline
newbie
UK
Last seen: 5 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2009-06-08
Posts: 6
Points: 0

Thanks for your help,

Thanks for your help, Razer.

I just want a background image applied to that div section, regardless of what height it is.

I didn't feel it necessary to add a minimum value for it - But just for reference, I found that a min-height value to that div causes the background to fill in for whatever value is given - Give it too high a value, and the background spills off the bottom of the page causing it scroll (which is what I would expect).

Setting min-height:100% and the background isn't shown at all! Sad

I just want the background applied to whatever the divs height happens to be.

VanDiesel
VanDiesel's picture
Offline
newbie
UK
Last seen: 5 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2009-06-08
Posts: 6
Points: 0

Further to this thread. I

Further to this thread.

I think the issue relates to sizing the parent divs accordingly so the left div in question knows what size it is meant to be.

So . . .

I changed all parent divs to height:100% and also added height 100% to the div I am struggling with . . .

Now, the background drops off the screen, down to about half the total browser window's height and gives a nice scroll bar. Hmmm . . . .

hizuka007
hizuka007's picture
Offline
Regular
Last seen: 3 years 10 weeks ago
Timezone: GMT-7
Joined: 2008-06-09
Posts: 22
Points: 0

put that background inside

put that background inside the #container.
like this:

#container {
  width: 974px;
  margin: 0 auto;
  background: url(../images/leftsubbckgnd.gif) left top repeat-y;
}
#left_col{
  width: 246px;
  float: left;
 
}
#right_col{
  width: 728px;
  float: left;
  display: inline; /* IE6 bug fix */
}

that way you created a fake background for left column.

, and by the way, remove those height: 100% because it is not necessary.

Smiles open closed doors

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 24 weeks 1 day ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

VanDiesel, If you want a

VanDiesel,
If you want a div to hold nothing but an image, and you want that image to be set as the background image through css, you must set the div dimensions to that of the image. If you dont want to do this, just place the image inside the div in the html.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 24 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

CupidsToejam

CupidsToejam wrote:

VanDiesel,If you want a div to hold nothing but an image, and you want that image to be set as the background image through css, you must set the div dimensions to that of the image. If you dont want to do this, just place the image inside the div in the html.

Since this clearly isn't a background image then it belongs in the html in an IMG tag. If there is nothing else in the DIV then it is clearly a foreground element and should be there. In fact quite possibly there shouldn't even be a DIV there at all.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 38 weeks 5 days ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

It sounds to me like he

It sounds to me like he wants it to be a background image - but, as Ed suggests, the empty div shouldn't be there. place the image on the container. or increase the width of the content div and use padding and place the image on it instead of the container.

VanDiesel
VanDiesel's picture
Offline
newbie
UK
Last seen: 5 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2009-06-08
Posts: 6
Points: 0

Thank you all for your

Thank you all for your assistance.

I have now solved the problem by following hizuka007's example above.

Two Divs side by side, one floated left, one floated right.
Both of the divs contained by another div with a large background image (which fills in any area left off at the bottom of both contained divs).