CODEWITHSUNDEEP
htmlcss
Anthony
Anthony

Reputation: 35928

how to position two divs next to each other but still be in center

I am really struggling with this and have been at it for quite some time.

I have a background image with a logo and I want a div in the center such that it doesn't block the BEE image in the background. Working Example here (this is fine as it doesn't block the image): http://jsbin.com/ubanuf/9

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

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

Why is it that I can't place the yellow div right next to the red div with margin of 10 px between them

My requirements are:

Is this possible to do at all?

Upvotes: 4

Views: 2941

Answers (1)

Ben
Ben

Reputation: 13615

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

Added a wrapping div with margin:auto and a fixed width of both divs and the margin (if you want to increase the margin you need to increase the size of this wrapper aswell)

Upvotes: 1

Related Questions