Andreas Moldskred Andreas Moldskred - 2 months ago 6
CSS Question

Html/css Div wont align beside each other

This is what my page looks like right now:

enter image description here

I want the red part to be beside the Last bets box or grey area. I am using bootstrap and I tried pull-left, but that only sets it too far away. I want it to be right aside.
This is what my Html looks like(for that area):



#lasttxt{
text-align:center;
padding-top: 10px;
font-size: 30px;
color:black;
}
#lastfill{
overflow: hidden;
overflow:auto;
}
#lastwrap{
left:0;
right:0;
width: 350px;
min-height:600px;
max-height: 1000px;
margin-left:90px;
background-color: grey;
}
#mainwrap{
min-width: 400px;
max-width: 800px;
min-height: 700px;
max-height: 1000px;
background-color: red;
}
#betarea{
position: relative;
}

<!-- Last bets -->
<div class="row">
<div id="lastwrap">
<p id="lasttxt">Last Bets</p>
<div id="lastfill"></div>
</div>

<!-- /last bets -->

<!-- Main_betsection -->
<div id="mainwrap" class="">



<div id="betarea">
</div>



</div>

</div>





I have tried a little bit of everything and I feel so stupid, so this is my last attempt to get it right.

Please help

Answer

If you're using bootstrap, try something like this.

<div class="row">
   <div class="col-sm-6">
     <div class="panel panel-default">
      <div class="panel-body">A Basic Panel</div>
     </div>
   </div>
   <div class="col-sm-6">
     <div class="panel panel-default">
      <div class="panel-body">A Basic Panel</div>
     </div>
   </div>
</div>

This will give you two Panels, size "6" next to each other, doing what you want it to do, essentially. Have a look at Bootstrap Columns here (https://getbootstrap.com/examples/grid/) or for better understanding, use w3schools bootstrap examples here: http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Comments