1

I was trying to make concept for my website, I was creating a responsive menu bar, Everything worked fine until i scaled browser when elements started overlapping each other.

I don't know if it's even possible to stop overlapping with absolutely positioned elements, After big research i have found nothing useful, i have tried clear:both as well.

HTML:

<div class="maincontainer">
  <div id="block1" class="blocks">
  </div>
  <div id="block2" class="blocks">
  </div>
</div>

CSS:

.maincontainer {
  display: block;
  background-color: black;
  margin: 0 auto;
  width: 100%;
  min-width: 600px;
  height: 250px;
}
body {
  background-color: white;
}
.blocks {
  background-color: red;
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 50px;
}
#block1 {
  background-color: green;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
}
#block2 {
  top: 100px;
  left: 0;
  right: 25%;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

I could have stopped the overlapping problem by using px dimensions instead of %, but since my main goal is to make a fully responsive menu, I am trying to stop their movement once they get close enough to overlap.

What could be the best way to stop this overlap? Can this be done by absolutely positioned elements at all? If not then what's the better way of doing it?

Note: I only want vertical aligning in this case, and i'm trying to stop overlapping in the specific case, where green block is fully in center and red block is left.

Please check Fiddle and Embedded result.

ShellRox
  • 2,532
  • 6
  • 42
  • 90

2 Answers2

2
  • Instead of mixing margin with position left and right, use one of the two for your question purpose.
  • If you assign a height and a width you only need either top or bottom and left or right.
  • You need to make use of a media query, so when the red block is going to overlap the green you change its left value to auto and its right from auto to calc(50% + 50px), where 50px is half of the green block width.

JSFiddle

.maincontainer {
  display: block;
  background-color: black;
  margin: 0 auto;
  width: 100%;
  min-width: 600px;
  height: 250px;
}

body {
  background-color: white;
}

.blocks {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 50px;
}

#block1 {
  background-color: green;
  top: 100px;
  left: calc(50% - 50px);
}

#block2 {
  background-color: red;
  top: 100px;
  left: 25%;
}

@media (max-width: 600px) {
  #block2 {
    left: auto;
    right: calc(50% + 50px);
  }
}
<div class="maincontainer">
  <div id="block1" class="blocks">
  </div>
  <div id="block2" class="blocks">
  </div>
</div>
Alvaro
  • 9,247
  • 8
  • 49
  • 76
  • Thanks! The code almost fixes my problem, but what if i needed div block to be in the center? and plus can i stop both of them getting closer when they are close by specific pixels? Thanks again. – ShellRox Jan 28 '17 at 12:13
  • @ShellRox You are welcome :) Which block should be in the center? Could you elaborate the second question? – Alvaro Jan 28 '17 at 12:16
  • Green block should be in the center, and red one on it's left side. Is it even possible with absolute positioned elements to stop the overlap in this case? – ShellRox Jan 28 '17 at 12:18
  • 1
    Ok, I understand now. You will need to use media query, let me edit the answer. – Alvaro Jan 28 '17 at 12:19
  • Thanks for the answer, just final question, can i stop elements moving when gap width between to elements is specific size? (For example 100px). – ShellRox Jan 28 '17 at 12:38
  • 1
    @ShellRox Sure! You would have to change the media query max-width and the right value inside. [Check this JSFiddle](https://jsfiddle.net/1370jujz/2/), I left a 30px gap so it is more evident. The 720px value is not correct as it was done by hand (testing), but you can do the exact maths :) – Alvaro Jan 28 '17 at 12:47
  • Thanks a lot, also `calc` method is compatible in new browsers right? ie11, edge, chrome, firefox, safari. Thanks! – ShellRox Jan 28 '17 at 12:51
1

I would suggest not to use absolute position, as this can be easily done without it.

I have used line-height for vertically aligning child div, you can further use flex to vertically center as per this: How to vertically center divs?

Following the updated code

body {
  background-color: white;
}
.maincontainer {
  display: block;
  background-color: black;
  margin: 0 auto;
  width: 100%;
  height: 250px; 
  line-height:250px;
  text-align:center;
}

.blocks {
  display: inline-block;
  width: 100px;
  height: 50px;
}
#block1 {
  background-color: green;
}
#block2 {
  background-color: red;
}
<div class="maincontainer">
  <div id="block1" class="blocks">
  </div>
  <div id="block2" class="blocks">
  </div>
</div>
Community
  • 1
  • 1
Sanjeev Kumar
  • 3,113
  • 5
  • 36
  • 77