Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Positioning elements

Ok imagine doing this without a framework like bootstrap. Here is what i want.

I have 2 divs (A and B). They are going to be used to create a layout for my page.

I want them to not overlap but instead be somehow "glued together". I also do not want them to break apart when i zoom in the page.


I don't know if i explained that correctly :/

5 Answers

Hi Mike,

It's probably going to be hard to give an answer here without knowing the context of how this is used.

If you give div#b a right position of 70% (instead of using a left margin) then it's right edge will coincide with the left edge of div#a. Is that what you want? I had to zero out the body margin to get it to work in the fiddle.

body {
    margin: 0;

#a {
    position: absolute;
    height: 100px;
    width: 100px;
    background-color: turquoise;
    margin-left: 30%;

#b {
    height: 50px;
    width: 50px;
    background-color: tomato;
    /* margin-left: 23.7%; */
    right: 70%;
    margin-bottom: 30%;

You could make margin-left work by using the css calc() function but I don't think browser support is great enough yet for you to use this in production. You'll have to decide for yourself: http://caniuse.com/calc

margin-left: calc(30% - 50px);

I think you'll have to give more info if none of these answers are what you're looking for.

James Barnett
James Barnett
39,199 Points

Good call about ::before.

Yeah calc isn't really useful for solving actual problems. But you can probably use a Sass mixin instead or some jQuery.

I agree with you. I was only mentioning it as something to keep in the back of your mind for future use.

I did a little quick research and it looks like this might not be a trivial thing to do with sass. At least not as easy as using the css calc() function.

Edit: I think that since sass isn't going to know in advance what number of pixels the % is going to equate too, it's not going to be able to do the calculation for you. It probably has to be done in real time by the browser either through the css calc() function or js as you mentioned.

I should add that since these elements have absolute positioning you would need to add a top margin of 150px to an element that comes directly after this so it can be pushed down below those boxes and not overlap them. Box A and B are removed from the document flow and so other elements are not going to respect their boundaries. You'll have to guard against this.

Jason Slabbers
Jason Slabbers
4,447 Points

I've made some changes in your jsfiddle. http://jsfiddle.net/5kLRD/ I hope this will help you.

But it would still allow me to overlap the other element. What i need is a way how to position an element A next to the element B but with some flag / option which would never allow me to overlap those 2 elements.

James Barnett
James Barnett
39,199 Points

Mike S. - The 2 boxes are 50px apart they will never overlap I'm not sure I understand what you are looking for.

Edit: I probably should clarify that I mean you're not moving box b's background but creating a faux background for it.

I don't think any solutions using ::before are going to be good if box b has content. You are essentially only moving the background to where it should be. The content isn't going to move with it.

Jason Slabbers
Jason Slabbers
4,447 Points

I think for what you're looking for that you need a surrounding container to set them beside each other. They will not overlap the other div.

Jason Slabbers
Jason Slabbers
4,447 Points

Otherwise I don't know what you looking for as output.

James Barnett
James Barnett
39,199 Points

This is kinda tricky, I forked Jason Slabbers on codepen (because jsfiddle drives me nuts)

  1. Use generated content via ::before so box b is comes right before box a.
  2. Add in a container box c can't overlap with boxes a or b
  3. Position the children of the container relative to itself (so you can use position: absolute on boxes a & b)
  4. Tweak margin on box b

Give this a shot:


Thanks guys. You are awesome. I will try your suggestions tomorrow :-)