...">

CSS - how to put a div on the right on another div?

<body> <div class="main-div"> <table id="gameboard-table"></table> </div> <div class="main-div"> Waiting for X players to join <div> Player 1 - </div> <div> Player 2 - </div> <div> Player 3 - </div> <div> Player 4 - </div> </div> </body> 

The first div has a table that is created dynamically, the second is static.

I tried to use

 .main-div { float: left; } 

but divs are still one below the other.

Of course, I didnโ€™t forget to include the CSS file in html :)

How can I solve it?

thanks!!!

+5
source share
2 answers

You need to set their width, because otherwise they just fill up to 100%.

 .main-div { float: left; width: 50%; } 
+4
source

Your float on the left should be on the child div main-div:

 .main-div div { float: left; } 

Check out this JSFiddle:

http://jsfiddle.net/Lqe7ug1L/

Note that now, as your HTML is written, the text โ€œPendingโ€ does not appear above them. You will need to wrap this in a separate element so that it appears above the div (I assume that the effect you need).

+2
source

Source: https://habr.com/ru/post/1203075/


All Articles