Center horizontally absolute div in another floating div

Question

I have the following markup:

.container {
  top: 50px;
  width: 800px;
  height: 300px;
  background-color: red;
  position: relative;
  text-align: center;
}
.left {
  width: 500px;
  height: 100%;
  background-color: black;
  float: left;
}
.right {
  width: 200px;
  height: 100%;
  background-color: green;
  float: right;
}
.messageWrapper {
  overflow: hidden;
  bottom: 0;
  max-height: 100%;
  min-height: 20px;
  position: absolute;
  width: 170px;
}
.message {
  min-height: 20px;
  background-color: yellow;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}

<div class="container">
  <div class="left">
    ...
  </div>

  <div class="right">
    <div class="messageWrapper">
      <div class="message"></div>
    </div>
  </div>
</div>

This produces the following result:

What I am trying to do is to horizontally center yellou div in a green one. It should stay in the same vertical position, but sligthly move to right to be centered in green div.

This question gets more and more downvotes. I am asking all downvoters to post a comment under this question. This is just ridiculous. What is wrong with this question??

what do you mean `the same vertical position as in example`? — jmore009, Dec 24 '14 at 19:47
When I see something like **I want!** in a question, I just ignore it. — emerson.marini, Dec 24 '14 at 19:48
Also, why did you tag this primarily as javascript? There is no JS in your code — eshellborn, Dec 24 '14 at 19:49
I can not achieve this... If I could i wont post this message. Can anybody help please? — Giorgi Nakeuri, Dec 24 '14 at 19:52
There is another SO post [here] (http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) that is similar. its in CSS2, but im sure you can take it as a foundation and build from there. — Justin Kyle Parton, Dec 24 '14 at 19:57
@giorgi-nakeuri take a look at css-tricks.com/centering-css-complete-guide/ it's a great resource on horizontal and vertical centering — ckuijjer, Dec 24 '14 at 20:02

score 2 · Accepted Answer · answered Dec 24 '14 at 20:05

These are the css elements you need to change:

.right {
    width: 200px;
    height: 100%;
    background-color: green;
    float: right;
    position: relative; //here
}
.messageWrapper {
    overflow: hidden;
    bottom: 0;
    max-height: 100%;
    min-height: 20px;
    width: 170px;
    text-align: center; //here
    width: 100%; //here
    position: absolute;  //here
}

.message {
    min-height: 20px;
    background-color: yellow;
    margin-left: auto; //here
    margin-right: auto; //here
    margin-bottom: 5px;
    width: 80%; //here
}

And a working fiddle: http://jsfiddle.net/a1Lp2o52/

Center horizontally absolute div in another floating div

1 Answers1