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! While you're at it, check out some resources Treehouse students have shared here.
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
mikescs
5,018 PointsPositioning 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
Jason Anello
Courses Plus Student 94,610 PointsHi 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 {
position:absolute;
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.
Jason Slabbers
4,447 PointsI've made some changes in your jsfiddle. http://jsfiddle.net/5kLRD/ I hope this will help you.
mikescs
5,018 PointsBut 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
39,199 PointsMike S. - The 2 boxes are 50px apart they will never overlap I'm not sure I understand what you are looking for.
Jason Anello
Courses Plus Student 94,610 PointsEdit: 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
4,447 PointsI 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
4,447 PointsOtherwise I don't know what you looking for as output.
James Barnett
39,199 PointsThis is kinda tricky, I forked Jason Slabbers on codepen (because jsfiddle drives me nuts)
- Use generated content via
::beforeso box b is comes right before box a. - Add in a container box c can't overlap with boxes a or b
- Position the children of the container relative to itself (so you can use position: absolute on boxes a & b)
- Tweak margin on box b
Give this a shot:
mikescs
5,018 PointsThanks guys. You are awesome. I will try your suggestions tomorrow :-)
James Barnett
39,199 PointsJames Barnett
39,199 PointsGood 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.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsI 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.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsI 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.