Html/css Div wont align beside each other

Question

This is what my page looks like right now:

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

Possible duplicate of [CSS layout - Aligning two divs side by side](http://stackoverflow.com/questions/2716955/css-layout-aligning-two-divs-side-by-side) — Laim McKenzie, Sep 11 '16 at 15:57
I think I answered your question where the two `div`s properly align **IN ANY CASE**. — Yash Jain, Sep 11 '16 at 16:02
This was such a stupid question of me, thank you for all the good answers. This saved my day=) — Andreas Moldskred, Sep 11 '16 at 16:13

score 4 · Accepted Answer · answered Sep 11 '16 at 16:01

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

score 3 · Answer 2 · answered Sep 11 '16 at 16:11

Ok so i made small change :

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

.align{
 margin-left:5%;    
}

<html>
<head>
<link href="html.css" rel="stylesheet" />    
</head>
<body>
 <!-- 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="align">
    
    

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


    </div>

</div>
    </body>
</html>

score 1 · Answer 3 · answered Sep 11 '16 at 16:01

I know tables should not be used for formatting, so please DO NOT downvote me for that reason, but it is a working solution to the problem.

All you have to do is what I put below as a snippet, using table elements.

NOTE

This requires no CSS at all.

#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;
}

<div class="row">
  <table>
    <tbody>
      <tr>
        <td>
          <div id="lastwrap">
            <p id="lasttxt">Last Bets</p>
            <div id="lastfill"></div>
          </div>
        </td>
        <td>
          <div id="mainwrap">
            <div id="betarea">
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

score 1 · Answer 4 · answered Sep 11 '16 at 16:01

If you decided to use the pull-left To make the gray and red boxes aligned - you should put that class to both of them.

Here is an example (it will not work in the snippet if you just click the "run code snippet" - you must open it in full page [check the right corner]).

#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

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

    <!-- /last bets -->

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

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


    </div>

</div>

This is a very well alternative to my solution, so I am giving an upvote. — Yash Jain, Sep 11 '16 at 16:03

score 1 · Answer 5 · answered Sep 11 '16 at 16:11

1

You can also use display:table-cell for both the div elements.

http://jsbin.com/kasobo/edit?html,css,output

answered Sep 11 '16 at 16:11

bvakiti

3,243
4
17
26

Html/css Div wont align beside each other

5 Answers5