CODEWITHSUNDEEP
htmlcssalignmentcenter
Pauli
Pauli

Reputation: 672

(CSS) Align div elements from center to left

I am trying to center one div element and make others float to the left from him like this:

See in the picture

In this code width and height is set to px but in my its in %. So I don't know where the center is. So it has to change with different resolution. I don't want to put it in another div and center that because it center both divs and I want only yellow to be in center.

Is there any solution besides putting another empty div on the left side with same height as green has and making him invisible?

.container{
    background-color:#34495e;
    width: 500px;
    height: 200px;
    padding: 10px;
}

.in-center{
    background-color:#f1c40f;
    width: 40%;
    height: 100%;
    display: inline-block;
}

.to-left{
    background-color:#2ecc71;
    width: 20%;
    height: 100%;
    display: inline-block;
}
<div class="container">
        <div class="in-center"></div>
        <div class="to-left"></div>
</div>

Upvotes: 1

Views: 764

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  background-color: #34495e;
  width: 80%;
  height: 200px;
  text-align: center;
  position: relative;
}
.in-center {
  background-color: #f1c40f;
  width: 40%;
  height: 100%;
  display: inline-block;
}
.to-left {
  background-color: #2ecc71;
  width: 20%;
  height: 100%;
  display: inline-block;
  position: absolute;
}
<div class="container">
  <div class="in-center"></div>
  <div class="to-left"></div>
</div>

Upvotes: 1

Related Questions