Side by side divs behave strange

Question

I have this :

.themeMenu {
  width: 100%;
  height: 10%;
  border: 0px;
  overflow: hidden;
  background-color: yellow;
}

.Preview {
  display: inline-block;
  height: 100%;
  width: 15%;
  background-color: red;
  margin-left: 2%;
}

.mag {
  display: inline-block;
  height: 100%;
  width: 15%;
  background-color: green;
}

.themeTitle {
  display: inline-block;
  height: 100%;
  width: 20%;
  background-color: green;
  text-align: left;
}

<div class="themeMenu">
  <div class="preview"></div>
  <div class="mag"></div>
  <div class="themeTitle">text here ruin it</div>
</div>

Problem : when I don't put text into themeTitle its aligned to the right just fine, but if I put one letter inside this div, all of it will go down so preview/mag are vertically aligned but themTitle goes down.

EDIT:

`vertical-align:top;`

will put the themeTitle in the same height with preview/mag, but the text will be on top, I need all of them to be vertically aligned to center :

( preview | mag | themeTitle )

that's the default *baseline alignment* I guess - see https://stackoverflow.com/questions/41375341/ — kukkuz, May 03 '19 at 01:49

score 0 · Answer 1 · answered May 03 '19 at 02:05

0

Solve it with : vertical-align:top; , but text is still on top , so added a new h1 inside :

  <div class="themeTitle"> <h1 class="fontRoundedText">ff</h1> </div>

Then on this h1 ,

.themeTitle>h1
{
  vertical-align: center ;
  font-size: 100%;
}

answered May 03 '19 at 02:05

Curnelious

1
10
65
133

score 0 · Answer 2 · answered May 03 '19 at 07:06

0

try this, just insert newline

<div class="themeMenu">
  <div class="preview"></div><br>
  <div class="mag"></div><br>
  <div class="themeTitle">text here ruin it</div>
</div>

answered May 03 '19 at 07:06

jetjetboi

112
1
11

Side by side divs behave strange

2 Answers2