div background pic doesn't appear

Pehape

here i have my html code: inside 'leftside' i have 'date' and 'leftnav' ( it's as main container for 'date' and 'leftnav')

<div id="leftside">
<div id="date">
today <br><?php echo date('D, d - M - Y');?>
</div>
<div id="leftnav">
<ul>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> Katalog </a></li>
<li> <a href="#"> Member </a></li>
<li> <a href="#"> Buku Terpinjam </a></li>
<li> <a href="#"> Wanted </a></li>
</ul>
</div>
</div>

on my css.. i have:
div#leftside
{
background:url(image/leftside3.jpg) no-repeat;
}
div#date
{
float:left;

}
div#leftnav
{
clear:left;
float:left;
}

but the background picture doesnt appear when i run it.. why..?
i want the date's and leftnav's text or object sits on the pic...
thank you...

bpat1434

Well, where is your stylesheet in relation to your images folder? If it's in the same directory, it should work. If not, you need to change your path. It would also help to define where the background picture is attached by using the top, left, bottom, or right key-words after "no-repeat".

Something like:
div#leftside {
background: url('image/leftside3.jpg') no-repeat top left;
}

You might also specifying that the other divs, have no background:
background: none;

Pehape

i think i got the answer..., i forgot to add float: left... on my div#leftside..
thank you...

Pehape

ohh i want to ask
is it allright if i'm using liquid and fixed width together in one page (mixed it, first div using liquid while second div using fixed )

bpat1434

Should be fine to mix both fixed and variable width items. The only time it becomes a problem is when you have something variable, inside a fixed-width item.

Pehape

The only time it becomes a problem is when you have something variable, inside a fixed-width item.

what something variable? sorry i don't understand...

bpat1434

Okay, so say this:
Div 1 is variable width
Div 2 is fixed width at 400px wide.

You place Div 2 inside Div 1 (<div id="1"><div id="2"></div></div>)
When displayed, this will be fine as Div 1 can stretch as needed to fit its contents.

HOWEVER

You place Div 1 inside Div 2 (<div id="2"><div id="1"></div></div>)
When you have content in Div 1 that would make it expand to say 800px wide, what you'll get is one long column 450px wide. So sometimes variable width items inside fixed width is fine (like having a side-bar with mini-news items. However, sometimes it can backfire.

Basically, I was just saying that you need to think about your layout before you go jumping into it.

Pehape

umm.. that's way..okay,... here i have prob remain on that backg. pic:
i have a wrapper (say wrap1) that wrap 2 column, left (navigation) and right (content).
what i want to do is to insert backg. pic on the left side (for navigation), i insert the pic on div#wrap1 ( i place it on div#wrap1 so it's height follow the content height..).,the pic is 150x1500px,. it's good on my ie 6 but the pic doesnt't appear on firefox.. so i place the height property on div#wrap1 to make the background visible... but if i first-defined the height like this, i can't make the pic height to follow the content height...
please help..?

bpat1434

That was all very confusing, can you try and restate that?

Pehape

ok.. sorry..
well.. actually i have prob on firefox... ; it doesn't show my backg.pic . after some testing..
i know that my backg.pic doesn't show up because i don't specify the height property of the div (say div pic) which containing it.
so i try to define the height (say 800px) and then right.. the pic is now visible.
it's mean that i have to staticly define my div pic's height while what i want is the divpic's height to dynamicly follow (same as)the main wrapper's height...
the tag hierarchy is like this:
( main wrapper -- main content-- divpic -- /divpic -- divcontent --/divcontent --/main content --/main wrapper)
in main content - div pic is on left side while divcontent is on the right side.
divcontent is different and its height depend on the page's content that served on each page.. so i think and the divcontent would be the 'central' that define the main wrapper or main content's height. that's why i don't specify main wrapper and main content height.. as it depend or follow their child max-height.
i'm searching for better clue...
thanks, i hope u get it clear enough to help me...

bpat1434

What does your HTML and CSS code look like?

Pehape

html code:

<body>
<div id="supercontainer"> <!--main wrapper-->
<div id="header">
		 <div id="head">

	 </div>
	 <div id="search">

	</div>
</div> <!--header-->
<div id="container-mid">
    <div id="leftside">
		 <div id="date">

	 </div>
	 <div id="leftnav">
	     <ul>
	 		 <li> <a href="#"> Home </a> </li>
			 <li> <a href="#"> Katalog </a></li>
			 <li> <a href="#"> Member </a></li>
			 <li> <a href="#"> Buku Terpinjam </a></li>
			 <li> <a href="#"> Wanted </a></li>
	     </ul>
	 </div>
</div> <!--leftside-->
<div id="content">
<div id="left">
    <div id="information">
           bla..bla..  

    </div> <!--information-->
</div> <!--left-->
<div id="right">
    <div id="words">

    </div> <!--words-->
</div> <!--right-->
<div id="bottom">
	<div id="book_header">

	</div>	
	<div id="book_info">

	</div>
</div>	 <!--bottom-->	
<div id="footer">
<hr>
&nbsp &nbsp &nbsp &copy;2006
<br>   Built with PHP
</div>	<!--footer-->
</div>  <!--content-->
</div>  <!--container-mid-->

</div> <!--supercontainer-->
</body>

css code:


body
{
  margin:auto;
  background:#eeeeee;
}
div#supercontainer
{
 width:1000px;
}
div#header
{
}
div#container-mid
{
 background:url(image/lefside3.jpg) no-repeat top left;
 width:100%;
 height:900px;
 width:900px;
}
div#leftside /*date&leftnav*/
{
 float:left;
}
div#date
{
 float:left;
 background:none;
}
div#leftnav
{
 clear:left;
 float:left;
}
div#content
{
 float:left;
 margin-left:1.5em;
 background:#dddddd;
 width:600px;
}
div#left
{
 margin-left:0.5em;
 margin-top:0.5em;
 float:left;
 width:300px;
}
div#right
{
 float:left;
 width:250px;
div#bottom
{
 clear:both;
 float:left;
}

see.. at my div#container-mid, i add height: 900 px it's only for firefox so it will show the picture. (doesn't matter for ie)
but with this height defined like this... would make my display looked weird.. and also my footer which i placed intentionally on bottom part of content won't be in very bottom as i want to. any ideas? thank you again for your help so far.

bpat1434

How is the picture supposed to look? Is it a repeatable image, or something? Can we get some examples, or you post the image so I can test it out?

Pehape

it's only for left navigation's side pic. a pic with 150px width and 1500px height...
and placed once on container-mid ,so it would take about 20% of container-mid width...
80% would empty.. , I would fill that 80% width left with another picture on background's property of div#content... (but right now i'm not use an image, only background color to set differences between the divs)
i don't post the pic since it's just ordinary gradient color pic.. made by ad phtshop.. with 150x1500.
would it be a problem if i made the pic to take only about 20% of the container-mid div?
what about the 80% ? would it supposed as 'none' (no background-picture or color)?