Extending the left hand element even thou it has no content

**ronanmagee** · Jun 29, 2004 08:30

Hey all,

Back again with yet more poblems.

I'm using the basic 5 element structure. I've managed to add a navigation element above my center content element [thanks to paul

].

My problem being now is that I need my left and right hand side elements to extend to the footer, however these 2 elements will never have any content in them. I have shaded them grey with the hope that they can reach the grey footer I have place therefore creating a grey 'U' shape with all the content in the center? Also, this content will always be of a varying length, so one week it may be say 20 lines of text/images and the next maybe 10 lines of text/images.

Any help/tutorials/links much appreciated,

Regards,

Ronan

**Paul O'B** · Jun 29, 2004 08:42

Hi,

Yes look at my 3 col demos and explanations as the explain some full length column techniques.

However in your case I think the best thing is to simply use 2 repeating bg images for the columns.

Wrap your page in another wrapper and then repeat an appropriate image down the left side of the wrapper (y-axis). Then repeat another image down the right side of the inner container.

(The images should be the width of the column and about 5 pixels high.)

As long as your content is inside both of those containers the columns will extend as required.

This is the easiest way without resorting to my negative margin techniques.

Paul

**ronanmagee** · Jun 29, 2004 09:10

Paul,

once more your a legend. Looking at your website, gonna attack some of your tutorials and try mastering them.

thanks once again,
no doubt I'll be back at another stage!

Ronan

**ronanmagee** · Jun 29, 2004 09:47

Hey Paul,
Not really understanding this completely.

my css for the left and right is as follows:

Code:

#left {
border: solid black 1px;
margin-left: 10px;
float: left;
width: 50px;
background: #E8E8E8 url('../images/trans.gif') repeat-y left top;
}

* html #left {
margin-right:-3px;
}

#right {
margin-right: 10px;
float: right;
width: 50px;
border: solid black 1px;
background:pink url('../images/trans.gif') repeat-y right top;
}

* html #right {
margin-left:-3px;
}

It's taking in the image aok but not extending.

My html is:

Code:

<body>
	<div id="top">
		<div id="logo">
		<h2 align="right">Telephone Number</h2>
		</div>
	</div>
	<div id="wrapper">
		<div id="left">
		<p>&nbsp;</p>
		</div>
		<div id="right">
		<p>&nbsp;</p>
		</div>
		<div id="nav">
		<p>Nav</p>
		<p>Nav</p>
		<p>Nav</p>
		<p>Nav</p>
		<p>Nav</p>
		<p>Nav</p>
		</div>
		<div id="center">
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		<p>center</p>
		</div>
		<div id="clear">
			<!-- Make Clear for footer -->
		</div>
			<!-- Close Clear for footer -->
	</div> <!-- close wrapper div -->
	<div id="footer">
	Footer
	</div>
	<br>
</body>

U mentioned:

Wrap your page in another wrapper and then repeat an appropriate image down the left side of the wrapper (y-axis). Then repeat another image down the right side of the inner container.

This is throwing me, especially the part of inner container.

Regards,
ronan

**Paul O'B** · Jun 29, 2004 10:28

Hi,

The images don't go in the floats themselves beacause they won't hold 100% height.

This is why you need two outer wrappers to place the images in and then the floats just lay over the background to simulate extending columns.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Draperstown Commercials</title>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-1" />
<style>
#top {
background: red;
height: 10px;
border: solid black 1px;
}
#left {
float: left;
width: 50px;
border: solid black 1px;
}
* html #left {margin-right:-3px}
#right {
float: right;
width: 50px;
border: solid black 1px;
}
* html #right {margin-left:-3px}
#center {
margin-left: 50px;
margin-right: 50px;
background-color: #ccc;
border: solid black 1px;
}
* html #center {height:1%;margin-left:47px;margin-right:47px;}
#footer {
background: red;
text-align: center;
border: solid black 1px;
}
#nav {
background-color: blue;
border: solid black 1px;
height: 10px;
margin-left: 50px;
margin-right: 50px;
}
* html #nav {height:1%;margin-left:47px;margin-right:47px;}
#clear {
clear: both;
}
#wrapper1{
 background-image: url(leftcolbg.jpg);
 background-repeat: repeat-y;
 background-position: left top;
}
#wrapper2{
 background-image: url(rightcolbg.jpg);
 background-repeat: repeat-y;
 background-position: right top;
}
</style>
</head>
<body>
<div id="top"> 
  <p>Top</p>
</div>
<div id="wrapper1"> 
  <div id="wrapper2"> 
	<div id="left"> 
	  <p>Left blah blah blah blah blah blah blah blah blah blah blah</p>
	</div>
	<div id="right"> 
	  <p>Right blah blah blah blah blah blah blah blah blah blah blah</p>
	</div>
	<div id="nav"> </div>
	<div id="center"> Center </div>
	<br style="clear:both" />
	<div id="clear"></div>
  </div>
</div>
<!-- close wrapper div -->
<div id="footer"> Footer </div>
</body>
</html>

Hope that makes it clearer

Paul

**ronanmagee** · Jun 29, 2004 14:20

Hey all,
I had tried that earlier paul, sorta guessed thats what you were hinting at. I've tidied it up a bit and used your technique and naming. I've posted my site here just for testing.

I've added the extra wrappers - coloured wrapper1 green and wrapper2 yellow.

It doesn't seem to have pushed the right and left columns down to the bottom. The colors are just for illustration.

Any ideas?

Cheers,
Ronan

**Paul O'B** · Jun 29, 2004 15:20

Hi,

You're not getting this at all are you lol

You haven't put any background images in the wrapper 1 and wrapper 2 divs. These are the elements that will give the appearance of a column for you left and right floats. Even if you had put images in then you have then gone and given the wrappers a background colour which will rub the images below out.

The divs must be transparent so that both images show through.

This also means that you can't colour the floats as well or give them borders because that will rub out the bg images which are below them.

The bg images should have the borders added to the image so that you have no need to add borders or colours to them in the html.
e.g.

Code:

#left {
margin-left: 10px;
float: left;
width: 50px;
}
* html #left {
margin-right:-3px;
}
#right {
margin-right: 10px;
float: right;
width: 50px;
}
* html #right {
margin-left:-3px;

 
#wrapperLeftCol {
 background-image: url(http://www.btinternet.com/~wig/images/background.gif);
 background-repeat: repeat-y;
 background-position: top left;
}
#wrapperRightCol {
 background-repeat: repeat-y;
 background-position: top right;
background-image: url(http://www.btinternet.com/~wig/images/background.gif);
}

You will need to create a suitable image for each column though.

Have a look at this page:

http://www.pmob.co.uk/temp/ezora.htm

The left and right columns and the fancy borders are all made with this repeating gif :

http://www.pmob.co.uk/temp/images/ezoralbg.gif

Content is just floated on top of the background to give the illusion of columns.

I hope that makes it a bit clearer.

Paul

**ronanmagee** · Jul 5, 2004 05:29

Hey Paul,

Sorry for not getting back quicker, but I've got it sorted now. I was hoping to use a transparent gif of 50px x 5px, then have a coloured background for each wrapper. Thats what I was trying with my first attempt. I'm trying to create tabbed navigation so once I get it going i'll upload again to see what you think and maybe give me some advice on getting it standard across multiple browsers,

regards,

Ronan

User Tag List

Thread: Extending the left hand element even thou it has no content

Thread Tools

Display

Extending the left hand element even thou it has no content

Bookmarks

Bookmarks

Posting Permissions