Align shortcode Divs?
- Started
- Last post
- 17 Responses
- sem
Hi
Can someone take a look at this
http://metrohospitality.co.uk/te…I'm trying to get all 3 boxes perfectly aligned in the center side by side, but as you can see things are not in line properly...the middle box is closer to the left...
I've tried column plugins in WP and more, yet still can't figure out what i'm sure is a really simple issue :|
- 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.
- 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>"