CODEWITHSUNDEEP
javascripthtmlcss
Master DJon
Master DJon

Reputation: 1965

Center a DIV containing relative element using CSS

I struggle about this behavior. I add two DIVs (sub1 and sub2) inside a DIV container. Sub2 is set a relative position to overlap the bottom right corner of the Sub1. Doing this, the width of the container DIV isn't good, it is the same as before changing relative position of Sub1. At first, it wasn't problematic, but then, the client decided to center the whole thing, thus needing the real width of the container.

Can this be achieved via CSS ? Even in JavaScript, I got the same width (the erronus one).

Here is the a simple example of the problem :

html, body {
  width:100%;
  height: 100%;
}

#main {
  position: fixed;
  display: inline-block;
  margin: auto;
}

#sub1 {
  width: 100px;
  height: 100px;
  background-color:red;
  position: relative;
}

#sub2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  left: 80px;
  top: -20px;
}
<div id="main">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>

Upvotes: 0

Views: 64

Answers (3)

vedmaque
vedmaque

Reputation: 323

If you want your container DIV to possess width of two blocks you shouldn't use relative positioning. Use margin instead

#sub2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-left: 80px;
  margin-top: -20px;
}

Upvotes: 2

TylerH
TylerH

Reputation: 21087

Here is a popular way to center any element (without adding more divs): use the transform property in conjunction with left (or top for vertical centering).

html, body {
    width:100%;
    height: 100%;
}

#main {
    position: fixed;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
}

#sub1 {
    width: 100px;
    height: 100px;
    background-color:red;
    position: relative;
}

#sub2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    left: 80px;
    top: -20px;
}
<div id="main">
    <div id="sub1"></div>
    <div id="sub2"></div>
</div>

I also removed display: inline-block; from #main{} because it wasn't doing anything in this demo.

Upvotes: 1

jered
jered

Reputation: 11581

I am a little unclear of what behavior you want to see. I take it you want the red and blue squares to overlap, but you also want them to be centered in the page? In that case the solution is easy, just add another DIV layer between "main" and the smaller boxes.

html, body {
  width:100%;
  height: 100%;
}

#main {
  position: fixed;
  display: inline-block;
  margin: auto;
  width: 100%;
  height: 100%;
}

#center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#sub1 {
  width: 100px;
  height: 100px;
  background-color:red;
  position: relative;
}

#sub2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  left: 80px;
  top: -20px;
}
<div id="main">
    <div id="center">
        <div id="sub1">
        </div>
        <div id="sub2">
        </div>
    </div>
</div>

Generally for each "transformation" that you want an element to do, you should add another DIV wrapper around it for that transformation. That way each transform is independent from one another and they're easier to manage.

Upvotes: 1

Related Questions