How to move my product boxes closer together?

HTML & CSS
1

Hi,

I have a website http://www.97centhosting.com

Where it says $0.97/Month in the blue circle, I want that box to move closer to the $14.97/Year box. Also I want the $4.97/month box on the other side to be moved closer to the $14.97/Year.

So basically just evening out the boxes. (blue, red, green boxes)

Heres what I want done…

971×865 403 KB

Any help would be most appreciated!

Thanks

2

Bit tough because of hte rigid bootstrap (another reason why I hate frameworks.)

You can place negative margins on the center column to pull it.

.pricing2{margin:0 -10px 0;}

It would be a better solution if you could not use bootstrap and actually code that 3 column display using regular CSS.

3

Its just making the boxes bigger or smaller its not moving them closer to the middle box.

Thanks

4

It makes the middle box slightly larger thus reducing the gap.

Did you actually want the side boxes out of the gutter?

5 
.span3:first-child {
  margin-left:40px;
  margin-right:-10px;
}
.span3:last-child {
  margin-left:20px;
}
6

I wanted the two outside boxes to be moved in close to the middle box.

Thanks

7

Did you try my code?

8

Code worked. How do I get the boxes 4px closer together to the middle box?

Thanks

9

Untested but I’d imagine something like this.

.span3:first-child {
  margin-left:44px;
  margin-right:-14px;
}
.span3:last-child {
  margin-left:24px;
}

Just update those valuse as needed.

10

Worked, thanks for all the help!

11

Here to help! You’re welcome.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.