Css Border Image

[Lefteris]

Hello all,I have been trying to set a border image to the central div of my site, just to give it some depth. You know make it look like it has a shadow on the left of the div.I read this columns layout article but I still did not manage to do it. My problem is that even though the div seems to take up the space I thought it would it will not appear unless I put something in it. I want the div (and its background image which will be a .png transparent image , giving the shadow illusion) to stretch and repeat my background image as far as the central text div happens to be stretched.Here is the html

<div id="centerWrapper">			<div id="leftWrapper">eleos</div>		<div id="centerOfPage">				<h1> </h1>		</div>  </div>

The background color appears only if I put some text inside, as you can see from above. If there was nothing inside the leftWrapper div then the div would not even be visible. Do you have any idea how I could do this correctly? I guess it can't be that hard, so many website have images bordering their central page text .Here is my CSS so you can see what I am doing wrong:

......#centerWrapper{	float:left; 	width:80%	}#leftWrapper{	width:10%;	clear:both;	float:left;	height:100%;	background:#fff url(leftShadow.png) repeat-y left top;}/*CENTER OF PAGE ELEMENTS*/#centerOfPage{	background-color:#112951;	background-repeat: no-repeat;		margin-left:10%;	padding: 3.2em 0.8em 30em 0.8px;}....

Thanks in advance for any help.

[chibineku]

just put   in the div to keep it open, or enter text the same colour as the background

[Lefteris]

just put   in the div to keep it open, or enter text the same colour as the background

Thank you for your reply but that would yield the same result. The background of the border image would be visible for only the area that the   would cover. Let me show you what I mean exactly.Here you can see the 'leftWrapper' div at the top left of the image and the center div is the one with the blue background. I want the left wrapper to stretch in height as much as is needed to match the center div which contains the text.How can I achieve that?

[chibineku]

You can embed the main div inside the left div and give the main one margin-left to match the desired left div width

[Lefteris]

That worked perfectly, thank you chibineku.EDIT: Actually chibineku , with this short sentence of yours, you made me realize a few things about CSS floats and margin style of positioning. Thank you very much, I think I might look into it a little further

[thescientist]

div containers will only expand to fit the content inside them. So as you just learned, padding, margins, etc are great ways to create empty space and to position things. Alternatively, you can "fix width" your div using "px" instead of "%".