Align shortcode Divs?
- Started
- Last post
- 17 Responses
- vaxorcist0
you could... go ... back.. to... table... code... and risk the endless ire of purists but get it done in 10 minutes....
- "</td></<tr></table>"
^Who could bring themselves to charge people for typing that ??mikotondria3
- "</td></<tr></table>"
- ideaist0
Your width of each is 300px.
Your full width is 980px.
So, you have 4 spaces which need to be equal; 20px each.
Clean up your styling and resolve said spacing.
- rabbit0
the above solution is messy, the best solution would be this:
<div class="container">
<div class="third"></div>
<div class="third"></div>
<div class="third"></div>
</div>styles:
.container{width:940px;}
.third{width:300px;}
.third:nth-child(even){margin:0 20px 0 20px;}- Just be aware 'nth child' Is not ie 7 and 8 friendlyHombre_Lobo
- (to the OP, not you rabbit, I'm sure you know)Hombre_Lobo
- rabbit0
here you go buddy
http://pastebin.com/YMqzg0cg
- sem0
I don't really understand what you mean, whats in there are the moment (which i know is completely wrong) is
<div style="float:left;margin-right:20px;">
[slideupbox id="591"] [slideupbox id="590"]
</div>
<div style="overflow:hidden">
[slideupbox id="590"]
</div>Because i'm using short-codes for the boxes.
- rabbit0
you are done, i see iton your site, just add:
float:left;
to the .third class
- sem0
Rabbit, I tried that, no joy? I put the style code in 'custom css' in the theme options also...still nothing?
- sem0
Ahhh, Rabbit you genius :) i will actually treat you, is the email you use on here your PayPal one?
- nar, all good man. just hook us up with some Plan B tix if he ever comes to OZ haharabbit
- do you care about IE8 users? the margin on the center div wont work on ie8rabbit
- if so just add another class to the middle .third div such as .middle{margin:0 20px} and remove the nth-child class all togetherrabbit
- together
rabbit - Haha, thanks bro, and not as much, its more to get it just up and running for current Browsers...will put disclaimer.sem
- rabbit0
<div style="width:940px">
[slideupbox id="591"]
[slideupbox id="590"]
[slideupbox id="590"]
</div>then add the following properties to whatever class is rendered on the slideupbox shortcode html output
.slideupbox{width:300px;height:3... float:left;}
.slideupbox:nth-child(even){marg... 20px;}
- sem0
Rabbit...I've put the container in a page with another container and this is whats happening
http://metrohospitality.co.uk/pr…
How can I make the three boxes drop to the bottom?
- rabbit0
add float:left to .containerr
change:
.third:nth-child(even){margin:0 20px;}
to
div.third:nth-child(even){margin... 20px;}
- rabbit0
o wow, actually ignore the change lines part.
you need to update the middle box to have a new class like:
.middle{margin:0 20px;}
apply this to your other page too and delete
.third:nth-child(even){margin:0 20px;}
- or just take out the h2 from the containerr and put that in another containerr if you are lazy lolrabbit
- sem0
in the css i have
@font-face {
font-family: DINWebPro;
src: url(http://metrohospitality.co.u...
font-weight:400;
font-size:12px;
}.middle{width:940px; float:left;}
.halfz{width:450px; float:left;}
.halfz:nth-child(even){margin:0 20px 0 20px;}.containerr{width:940px;}
.third{width:300px; float:left;}
.third:nth-child(even){margin:0 20px 0 20px;}
but it seems the bottom container is still further away from the border now?
- sem0
Sorted it...thanks again, owe you 10000 pints :)
- Hombre_Lobo0
Just be aware your styling won't work in IE 7+8.
The CSS selector nth-child isn't supported. Just add a class to it and apply your styling directly to get around it (if you need to).
It's a shame, I fucking love advanced CSS selectors.
- sem0
Do people still use IE7+8?
- Only people who don't care if divs they view don't line up properly.
Bosses, eg.mikotondria3 - people who write checks are the most likely to use IE.....vaxorcist
- Yes vax :( often very true.Hombre_Lobo
- Only people who don't care if divs they view don't line up properly.