Same line div tags

Question

Sorry to ask such a stupid question, but it was a pretty long night, and I can't get my code to display divs on the same line.

I looked for all the stack overflows and none of the answers helped. This may be a very stupid mistake that I made, but I did not notice it.

<td> <div class='sameline'> <?php echo "<div class='hbox'>Max Health: $hp</div><div class='mbox'>Max Mana: $mana</div>"; ?> </div> </td> .hbox { color:white; background: #dd0408; /* Old browsers */ background: -moz-linear-gradient(top, #dd0408 0%, #dd0408 0%, #bf0326 0%, #d30407 38%, #b20002 76%, #ba0003 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd0408), color-stop(0%,#dd0408), color-stop(0%,#bf0326), color-stop(38%,#d30407), color-stop(76%,#b20002), color-stop(100%,#ba0003)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* IE10+ */ background: linear-gradient(to bottom, #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd0408', endColorstr='#ba0003',GradientType=0 ); /* IE6-9 */ text-align:center; width:45%; height:16px; border:1px solid #333; } .mbox { color:white; background: #00a4f7; /* Old browsers */ background: -moz-linear-gradient(top, #00a4f7 1%, #00b7f9 43%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#00a4f7), color-stop(43%,#00b7f9), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* IE10+ */ background: linear-gradient(to bottom, #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4f7', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */ text-align:center; width:45%; height:16px; border:1px solid #333; } #sameline { overflow: hidden; white-space: nowrap; } 

Answer 1

 .hbox, .mbox { box-sizing: border-box; -moz-box-sizing:border-box; /* Firefox */ display:inline-block; } 

Answer 2

Add float:left to both .mbox and .hbox.

Answer 3

I believe you need the two divs inside the <div class="sameline"> appear next to each other

therefore css rule for example

 .hbox, .mbox {float:left} 

Gotta do it

Answer 4

Just add a .sameline div {float: left;} .

(By the way, try to avoid posting PHP when asking CSS / HTML questions, as this makes it difficult to read / interpret the code, although not too complicated here. Get the HTML code from the source code of the browser if necessary.)

Also note that sameline is a class, so this will not work unless you change # to . :

 #sameline { overflow: hidden; white-space: nowrap; } 

Answer 5

if you add float: left; in .mbox and .hbox , it should work. An example is here .