HTML and CSS

clear both? float?

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Mar 2006

Posts: 24

Reputation: Anax is an unknown quantity at this point

Solved Threads: 0

Anax

Offline

Newbie Poster

clear both? float?

May 30th, 2006

Hia,
I'm trying to get a repeating image running along the bottom of the screen, starting when the central text stops. I feel I'm close...
http://www.awordinyourear.net/Links/

the code I've got now is;

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

 
.centralbranches {
	position: absolute;
	left: 220px;
	top: 190;
	width: 65%;
	background-color: #EEDCF5;
 
	}
#centralbranchestext{
	margin-left: 6%;
	margin-right: 8%;
	margin-top: 40;
	margin-bottom: 259;
	z-index:10;
 
	color: #333333;
}
#branchesbot{
	background-image: url(Background/BranchBottoms.gif);
	position: absolute;
	height: 259px;
	width: 100%;
	bottom: 0px;
	clear: both;
	float: left;
 
}

[html]
<div class="centralbranches">
<div id="centralbranchestext">
...copy...

</div>
<div id="branchesbot"></div>
</div>
[/html]

any help much appreciated

Anax

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: clear both? float?

Jun 2nd, 2006

Research the "background-image" and "background-repeat" CSS declarations.

Edit: sorry, I see you are using background-image. But "background-repeat" is likely what you want instead of float/clear.

•

Join Date: Mar 2006

Posts: 24

Reputation: Anax is an unknown quantity at this point

Solved Threads: 0

Anax

Offline

Newbie Poster

Re: clear both? float?

Jun 5th, 2006

Thanks Mr. Greer but I tried the 'background-repeat' and couldn't get it to work. Below is the best I could get... not very elegant but seems to work for IE and Firefox:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

#branchesbot{
	background-image: url(Background/BranchBottoms.gif);
	position: absolute;
	height: 277px;
	bottom: 0px;
	width:158%;
	left:-227px;
	margin-bottom:-9px;
}