Html/css display two div on the same line don't work

Question

I've started to learn some html/css/javascript for fun and i'm stuck with a problem. In the html I want to display some pair of div on the same line, but i don't know why i can't do it.

The div that i want to show on the same line and at the same height are the couples of "button" and "text"

Here is my code!

html {
  background-color: #e6eeff;
  font-family: Verdana;
}
* {
  border: 1px solid black;
}
#bgCal {
  background-color: #004466;
  color: white;
  width: 500px;
  margin: 0px auto;
  border-radius: 10px;
  padding: 10px 10px 10px 10px;
}
#display {
  background-color: #d7d7c1;
  color: black;
  text-align: right;
  width: 400px;
  height: 100px;
  font-size: 30px;
  margin: 10px auto;
  line-height: 100px;
  border-radius: 5px;
}
#numberTot {
  background-color: #d7d7c1;
  vertical-align: middle;
  line-height: normal;
  margin-right: 5px;
}
.button {
  background-color: #0099e6;
  width: 150px;
  height: 60px;
  border-radius: 5px;
  margin: 10px 50px;
  display: inline-block;
  text-align: center;
  overflow: hidden;
}
.text {
  background-color: #004466;
  color: white;
  height: 60px;
  width: 180px;
  margin: 10px 50px 10px 0px;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  overflow: hidden;
}

<div id="bgCal">
  <div id="display">
    <span id="numberTot"> 0 </span>
  </div>
  <button class="button" onclick="numberClick(1)">+</button>
  <div class="text">
    Every click increase of 1 the total number.
  </div>
  <br>
  <button class="button" onclick="buyStudent()">
    Buy Student
    <br>Cost: <span id="studentLUCost">10</span>
    <br>Students owned: <span id="studentLevel">0</span>
  </button>
  <div class="text">
    A student can click instead of yourself, but they are slower.
    <br>
    <span id="studentProd">0</span> num/sec
  </div>
</div>

Try to read float, but yes people will say display:inline-block is better so depend on condition/requirement. — Leo the lion, Aug 16 '16 at 12:49
hahaha you can give working example but i have readymade ex..go ahead :) — Leo the lion, Aug 16 '16 at 12:50
@DrewKennedy if you are going to use float then let me know so i can post as detailed information which is must use while using float. — Leo the lion, Aug 16 '16 at 12:51

score 3 · Answer 1 · edited May 23 '17 at 11:51

As Leo the lion suggested in the comments, you can simply put float:left and clear:both on your .button class to get the desired effect.

Clear is used to prevent floating elements from residing beside the element specified, in this case both left and right, and would push them below. There's an excellent QA about it here if you want to learn more.

html {
    background-color: #e6eeff;
    font-family: Verdana;
}

* {
    border: 1px solid black;
}

#bgCal {
    background-color: #004466;
    color: white;
    width: 500px;
    margin: 0px auto;
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
}

#display {
    background-color: #d7d7c1;
    color: black;
    text-align: right;
    width: 400px;
    height: 100px;
    font-size: 30px;
    margin: 10px auto;
    line-height: 100px;
    border-radius: 5px;
}

#numberTot {
    background-color: #d7d7c1;
    vertical-align: middle;
    line-height: normal;
    margin-right: 5px;
}

.button {
    background-color: #0099e6;
    width: 150px;
    height: 60px;
    border-radius: 5px;
    margin: 10px 50px;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    float:left;
    clear:both;
}

.text {
    background-color: #004466;
    color: white;
    height: 60px;
    width: 180px;
    margin: 10px 50px 10px 0px;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    overflow: hidden;
}

<div id="bgCal">
            <div id="display">
                <span id="numberTot"> 0 </span>
            </div>
            <button class="button" onclick="numberClick(1)">+</button>
            <div class="text">
                Every click increase of 1 the total number.
            </div>
            <br>
            <button class="button" onclick="buyStudent()">
                Buy Student
                <br>
                Cost: <span id="studentLUCost">10</span>
                <br>
                Students owned: <span id="studentLevel">0</span>
            </button>
            <div class="text">
                A student can click instead of yourself, but they are slower.
                <br>
                <span id="studentProd">0</span> num/sec
            </div>
        </div>

Upvoted but still m trying to give example with display:inline-block too so op can learn both things :) — Leo the lion, Aug 16 '16 at 12:53
No need - was going to put that in too and GCyrillus was just too quick. — Drew Kennedy, Aug 16 '16 at 12:54
one point to mention. Please use clear:both after float and put some information on that too so op will be careful with that too. — Leo the lion, Aug 16 '16 at 12:57

G-Cyrillus · Answer 2 · 2016-08-16T12:54:09.180

If you use inline-block, take a look at vertical-align

html {
  background-color: #e6eeff;
  font-family: Verdana;
}
* {
  border: 1px solid black;
}
#bgCal {
  background-color: #004466;
  color: white;
  width: 500px;
  margin: 0px auto;
  border-radius: 10px;
  padding: 10px 10px 10px 10px;
}
#display {
  background-color: #d7d7c1;
  color: black;
  text-align: right;
  width: 400px;
  height: 100px;
  font-size: 30px;
  margin: 10px auto;
  line-height: 100px;
  border-radius: 5px;
}
#numberTot {
  background-color: #d7d7c1;
  vertical-align: middle;
  line-height: normal;
  margin-right: 5px;
}
.button {
  background-color: #0099e6;
  width: 150px;
  height: 60px;
  border-radius: 5px;
  margin: 10px 50px;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  vertical-align:top;/* reset here vertical-align to next inline content: top, bottom, middle, 1em, etc ... */
}
.text {
  background-color: #004466;
  color: white;
  height: 60px;
  width: 180px;
  margin: 10px 50px 10px 0px;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  overflow: hidden;
}

<div id="bgCal">
  <div id="display">
    <span id="numberTot"> 0 </span>
  </div>
  <button class="button" onclick="numberClick(1)">+</button>
  <div class="text">
    Every click increase of 1 the total number.
  </div>
  <br>
  <button class="button" onclick="buyStudent()">
    Buy Student
    <br>Cost: <span id="studentLUCost">10</span>
    <br>Students owned: <span id="studentLevel">0</span>
  </button>
  <div class="text">
    A student can click instead of yourself, but they are slower.
    <br>
    <span id="studentProd">0</span> num/sec
  </div>
</div>

Wow..thats what i was trying. Thank you :) – Leo the lion Aug 16 '16 at 12:53 — Leo the lion, Aug 16 '16 at 12:53
Thanks for the example! – Davide Soresina Aug 16 '16 at 15:36 — Davide Soresina, Aug 16 '16 at 15:36

score 0 · Answer 3 · answered Aug 16 '16 at 12:53

0

You can just add

vertical-align: middle;

in css for both .button and .text classes.

I have made a fiddle link. You can check it - https://jsfiddle.net/1fm1cpqh/

answered Aug 16 '16 at 12:53

Rhythm Ruparelia

667
7
13

Thanks a lot for the tip! – Davide Soresina Aug 16 '16 at 15:36

score 0 · Answer 4 · answered Aug 16 '16 at 12:58

0

Just add float:left to your .button class .button{ float:left;}

answered Aug 16 '16 at 12:58

Ghayyour Ahmed Butt

383
1
2
12

Thanks a lot for the answer! – Davide Soresina Aug 16 '16 at 15:37
Appreciate it, please vote up for me on the left side. thanks in advace! – Ghayyour Ahmed Butt Aug 16 '16 at 15:44

Html/css display two div on the same line don't work

4 Answers4