Geek Answers Handbook

How to arrange two divisors next to each other, but still be in the center

I really struggle with this and have been doing this for quite some time.

I have a background image with a logo, and I need a div in the center so that it does not block the BEE image in the background. A working example is here (this is great since it does not block the image): http://jsbin.com/ubanuf/9

However, now I want to add another div to the right of the red div with some difference between about 10 pixels. However, when I do this, everything moves to the right, and my logo in the background is blocked by the div. Example here: http://jsbin.com/ubanuf/10

If I remove margin: 20px auto 0 from the main-controller , then everything looks decent until I look at the page at 1680 X 1050 . In this resolution, everything seems to be biased to the left. so now there is a huge gap between where the red div stops and the image of the bees begins. Screenshot here: http://i53.tinypic.com/25qqk4h.png

Why can't I place a yellow div next to a red div with a 10 px edge between them.

My requirements:

  • Red div for 750 pixels
  • The yellow div should be around 200 pixels
  • both next to each other with a marker 10 pixels in between
  • and the image of the bee should not be blocked

Can this be done at all?

+4
source share
1 answer

How about: http://jsbin.com/ubanuf/12/

Added separator with mark: auto and fixed width of both div and margin (if you want to increase the margin needed to increase the size of this wrapper)

+1
source

More articles:


All Articles