2

I have two divs:

<div class='container'>
  <div class='left'></div>
  <div class='center'></div>
</div>

I want to center the second div ("center"),

and place the first inner div to the left of the center one. im tring for hours with chrome and it don't work.

mikey K
  • 25
  • 5
  • https://stackoverflow.com/questions/50852584/how-to-get-a-div-centered-with-another-div-on-the-right-of-it/50852962#50852962 https://stackoverflow.com/questions/52221686/two-divs-alongside-each-other-first-sticked-and-the-second-centered# – VXp Sep 12 '18 at 08:03

6 Answers6

2

.left {
  float :left;
  width: 10%;
  margin-left: 10%;
  background: green;
}

.center {
  width: 60%;
  margin: 0 auto;
  background: red;
}

.main {
  width: 100%;
  background: yellow;
}
<div class="main">
  <div class="left">&nbsp;</div>
  <div class="center">&nbsp;</div>
</div>
DarkBee
  • 16,592
  • 6
  • 46
  • 58
2

Here's a solution without flexbox:

.main {
  text-align: center;
}

.main__inner {
  display: inline-block;
  position: relative;
}

.left {
  border: 1px solid tomato;
  position: absolute;
  right: 100%;
}

.center {
  border: 1px solid cyan;
}
<div class='main'>
  <div class='main__inner'>
    <div class='left'>left</div>
    <div class='center'>center</div>
  </div>
</div>
n1stre
  • 5,856
  • 4
  • 20
  • 41
1

here is what I came up with:

.main>* {
  display: inline-block;
  width: 33%;
}
<div class='main'>
  <div class='left'>abc</div>
  <div class='center'>def</div>
</div>

As demonstrated here.

Yet another solution

This solution will always place .left first.

HTML

<div class='main'>
  <div class='center'>def</div>
  <div class='left'>abc</div>
</div>

CSS

.main {
  display: flex;
  flex-flow: row;
  flex-wrap: no-wrap;
}
.main > .left {
  order: 1;
}
.main > .center {
  order: 2;
}

And if you want your inner-boxes to have same width:

.main > * {
  flex-basis: 33%;
}
Salathiel Genese
  • 1,639
  • 2
  • 21
  • 37
1

To position the left element as far to the left as possible, you can work with the margin of the center element, as demonstrated below.

Border and background colors are for visibility purpose and not necessary.

.main {
  display: flex;
  justify-content: center;
  width: 100%;
  border: thin solid black;
}

.left {
  background-color: red;
  height: 50px;
}

.center {
  background-color: blue;
  height: 50px;
  margin: 0 auto;
}
<div class='main'>
  <div class='left'>Left</div>
  <div class='center'>Center</div>
</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52
0

Try the following

.center{max-width:300px; margin:0 auto; overflow:hidden;}
.center .innerDiv {float:left; width:50%;}
<div class="center">
<div class="innerDiv"></div>
</div>
Tasawar Hussain
  • 92
  • 5
0

you can try this one

.A {
  display: flex;
  justify-content: center;
}

.B {
  background-color: red;
  position: absolute;
  right: 100%;
  top: 0;
}

.C {
  background-color: cyan;
  position: relative;
}

.C,
.B {
  border-radius: 4px;
  padding: 8px 24px;
}
<div class="A">
  <div class="C">
    <div class="B">left text</div>
    center text
  </div>
</div>
Vikasdeep Singh
  • 20,983
  • 15
  • 78
  • 104
Nir Schwartz
  • 1,723
  • 2
  • 15
  • 27