demonhale — Sat, 14 Jul 2007 04:18:10 +0000

my bad.. corrected now...

pr0gr4mm3r — Sat, 14 Jul 2007 03:48:30 +0000

Quote: An alternate way of doing this is through this css... It will generally work the same way... and less bulk...

That makes the sections vertical.

demonhale — Sat, 14 Jul 2007 01:37:44 +0000

An alternate way of doing this is through this css... It will generally work the same way... and less bulk...

#packages {
width: 210px;
padding: 0px 12px 5px 12px;
}

#packages.left {
float: left;
background:#fff url(/images/darkgrey.png) repeat-x;
}

#packages.centre {
float: left;
background:#fff url(/images/bronze.png) repeat-x;
}

#packages.right {
float: left;
background:#fff url(/images/brownorange.png) repeat-x;
}

Then in your html it could go like this...

<div id="packages">
        <div class="left"></div>
        <div class="centre"></div>
        <div class="right"></div>
</div>

pr0gr4mm3r — Fri, 13 Jul 2007 13:29:50 +0000

Yes, you have to clear the floats with something. In my example, I used a . A will work as well.

greg — Fri, 13 Jul 2007 05:35:28 +0000

thanks

I just wanted to be sure.

I often do something then learn later that my 25 lines of 'elseif' code can be done with a single pre-programmed PHP function that I didnt know about

in fact in this instance maybe
I have each one seperate:

#packageleft {
float: left;
width: 210px;
background:#fff url(/images/darkgrey.png) repeat-x;
padding: 0px 12px 5px 12px;
}
#packagecentre {
float: left;
width: 210px;
background:#fff url(/images/bronze.png) repeat-x;
padding: 0px 12px 5px 12px;
}

#packageright {
float: left;
width: 210px;
background:#fff url(/images/brownorange.png) repeat-x;
padding: 0px 12px 5px 12px;
}

Then call each id seperately as normal
....etc

I thought that to make them all 210px I would need them seperate
But if I made as you say, everything except the background image in one id
#packages_all { or whatever

and I wrap them all in that one div, will all the seperate package blocks be 210px?

And the only way I could get { clear: left} to work properly was using this after those three packages:

Now that cant be the best way of doings things either!?

Off-topic:
"there's no place like 127.0.0.1"
I have never seen that anywhere before

Sadly, I find it quite amusing

Cheers!

pr0gr4mm3r — Fri, 13 Jul 2007 01:57:53 +0000

Div tags and floating would be the best way.

Something like this:

<style>
.main {
	display: block;
	width: 300px;
	float: left;
	margin: 0 10px 10px 0;
}
.packagecenter {
	background-color: #eeeeee;
}
.packageleft {
	background-color: #eeeeee;
}
.packageright {
	background-color: #eeeeee;
}
</style>

<div class="main packageleft">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum aliquam nisi id augue.
</div>

<div class="main packagecenter">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum aliquam nisi id augue.
</div>

<div class="main packageright">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum aliquam nisi id augue.
</div>

<br style="clear: both; " />

<p>This will be on a new line.</p>

demonhale — Fri, 13 Jul 2007 01:36:26 +0000

Thats an applicable method using three different div containers to position sections, since you said different backgrounds then it would be necessary to have three different css classes for different backgrounds.