aligning divs (or text blocks) horizontally
I am trying to display three products I am selling, each product a title and block of text, I want to make each all three appear side by side horizontally
They all have a different background image (the old fading colour image trick) in an attempt to make the site look a little more dynamic and visually appealing
Is there a simple way to do this? Or am I correct in creating three seperate css classes?
I currently have .packageleft, .packagecentre and .packageright
then for each block of text I call them respectively etc
then the only way I have been able to get them to line up is using float
I dont like using absolute, as I think this can too easily mess a whole page up depending on users browser/resolution or zoom scale
Any tips?
Cheers!
demonhale posted this at 01:36 — 13th July 2007.
He has: 3,278 posts
Joined: May 2005
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.
pr0gr4mm3r posted this at 01:57 — 13th July 2007.
He has: 1,502 posts
Joined: Sep 2006
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>
greg posted this at 05:35 — 13th July 2007.
He has: 1,581 posts
Joined: Nov 2005
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 posted this at 13:29 — 13th July 2007.
He has: 1,502 posts
Joined: Sep 2006
Yes, you have to clear the floats with something. In my example, I used a . A will work as well.
demonhale posted this at 01:37 — 14th July 2007.
He has: 3,278 posts
Joined: May 2005
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 posted this at 03:48 — 14th July 2007.
He has: 1,502 posts
Joined: Sep 2006
That makes the sections vertical.
demonhale posted this at 04:18 — 14th July 2007.
He has: 3,278 posts
Joined: May 2005
my bad.. corrected now...
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.