Menu
<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 being created dynamically, that second one is static.
I've tried to use
.main-div {
float: left;
}
but the divs are still one beneath the other.
Of course I didn't forget to include the CSS file in the html :)
How can I solve it?
thanks!!!
662
Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
To position the divs side by side, we are using the float property to float each . float-child element to the left. Since they are both floating to the left, they will display side by side if there's enough space for both to fit.
You need to set their width, because otherwise they just fill to 100%.
.main-div {
float: left;
width: 50%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
