How to Position Elements Next to Each Other in a Div

How to place two divs next to each other?

Float one or both inner divs.

Floating one div:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}

or if you float both, you'll need to encourage the wrapper div to contain both the floated children, or it will think it's empty and not put the border around them

Floating both divs:

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* add this to contain floated children */
}
#first {
    width: 300px;
    float:left; /* add this */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    float: left; /* add this */
}

CSS positioning - two elements next to each other

You could use...

float: left;

on your div 'logtable'

I would advise using DIVs to do you alignment of content so wrap the table in a DIV.
I also prefer to use inline-block over float left and gives more predictable results.

so...

<div id="page">
 <div id="divTable" class="InsideContent">
     <table id="logtable">
      Left
     </table>
  </div>

 <div id="divMessage" class="InsideContent">
  Right
 </div>
</div>

#page {
    width: 1200px;
    margin: 0px auto -1px auto;
    padding: 15px;
}
.InsideContent{
    display:inline-block;
}
}
#divTable {
    width: 800px;
}
#divMessage {
    width: 350px;
}

Code needs tidying up but you get the idea...

JSFiddle http://jsfiddle.net/3N53d/

How to Place div elements next to each other?

Make a container div, in which both of your div's are located. This div needs to be of display:flex and flex-direction:row:

<div style="display:flex; flex-direction:row">
<div id="firstdiv"></div>
<div id="seconddiv"></div>
</div>

The other solution would be, to add display:inline-block to both of your div's

How to position two elements next to each other

.div-block-10 {  display: flex;  align-items:center;  height:100%;  margin: 98px 0 0;  text-align: left;  justify-content:center;}

<div th:if="${isLogged}" class="div-block-10">            <div class="user_name" th:text="${user.getFirstName() + ' ' + user.getLastName()}">Your Name</div>            <div th:if="${!user.isEmailValidated()}" class="div-block-13">                <div class="email_confirmed">                    <a th:href="@{'/email/send/' + ${user.getToken()}}">Your email is not confirmed!</a>                </div>            </div>

How to keep two div next to each other?

There are two issues here:

You need to set a box-sizing so that the width of the element includes the border
You need to remove the newline between the divs since it takes an extra space

div{
  border: 1px solid;
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
}

<form>
  <div>
    two
  </div><!-- you need to remove space here --><div>
    one
  </div>
</form>

How to align two div next to each other

Change the <div> to <span> and you'll save on lots of CSS:

.helpText {  margin-right: 10px;}
.help-block {  overflow: auto;  float: right;}

<div class="help-block">  <span class="helpText">Some text</span>  <button type="button" data-toggle="modal" data-target="#helpModal" class="btn btn-default helpButton">Buttom</button></div>

How to position elements next to each other in CSS without using float. i.e. main content next to sidebar

Your best bet is to have a main grid that contains the sidebar and a grid inside it that contains the main content:

body,html {  background: darkgrey;  height: 100%;  margin: 0;}
#horizontal-menu {  background: lightblue;  padding: 8px;  margin-bottom: 15px;}
#horizontal-menu p {  margin: 0;}
.grid-container {  display: grid;  grid-template-columns: 1fr 2fr 1fr;  grid-gap: 15px;  height: 100%;}
.side-bar {  background: red;  padding: 0;  margin: 0;  height: 100%;  grid-column: 1 / 2;}
.grid-items-container {  grid-column: 2 / 3;  display: grid;  grid-template-columns: repeat(4, 1fr);  grid-template-rows: repeat(2, 1fr);  grid-gap: 30px 20px;  background: #E1E1E1;  padding: 15px;}
.side-bar p {  padding: 0;  margin: 0;}
.grid-items {  font-weight: bold;}
.grid-item1 {  background: greenyellow;}
.grid-item2 {  background: rosybrown;}
.grid-item3 {  background: cadetblue;}
.grid-item4 {  background: darkturquoise;}
.grid-item5 {  background: darkkhaki;  grid-column: span 2;}
.grid-item6 {  background: lightblue;  grid-column: span 2;}

<div id="horizontal-menu">  <p>Menu</p></div>
<div class="grid-container">
  <div class="side-bar">    <p>Side Bar</p>  </div>
  <div class="grid-items-container">
    <div class="grid-items grid-item1">      <p>Grid Item 1</p>    </div>
    <div class="grid-items grid-item2">      <p>Grid Item 2</p>    </div>
    <div class="grid-items grid-item3">      <p>Grid Item 3</p>    </div>
    <div class="grid-items grid-item4">      <p>Grid Item 4</p>    </div>
    <div class="grid-items grid-item5">      <p>Grid Item 5</p>    </div>
    <div class="grid-items grid-item6">      <p>Grid Item 6</p>    </div>  </div></div>