2 divs not willing to display next to each other

Question

I have 2 div I need to position next to each other, with eventually a 3rd to be added. I've tried floating them, I've tried display and position options. also checked other websites copied that code but it still won't work.

html:

<div class="diensten">
    <div id="dienst1">
        <h2>Ontruimingsoefening</h2>
        <p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken. </p>
        <img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
    </div>

    <div id="dienst2">
        <h2>beheer brandmeldinstallatie</h2>
        <p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.
        <img src="Foto's/IMG_2704.JPG">  
       </p>
    </div>
 </div> 

css:

.diensten h2 {
    padding-top: 40px;
}

.diensten p, h2 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    padding: 20px;
}

.diensten {
    position: relative;
    display: inline-block;
    height: 500px;
    background-color: #FFFFFF;
    margin: auto;
}

#dienst1 {
    margin-left: 90px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 {
    margin-left: 900px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 img{
    height: 300px;
    width: 450px;
}

Answer 1

You just need to add

position: relative;
display: inline-block;

to the child divs, and

position: absolute;

to the parent div. Here is a working example (with 3 paragraphs side by side -- I reduced the width just so you can see them in the small window). You can also remove or reduce the margin if you want.

.diensten h2 {
    padding-top: 40px;
}

.diensten p, h2 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    padding: 20px;
}

.diensten {
    position: absolute;
    display: inline-block;
    height: 500px;
    background-color: #FFFFFF;
    margin: auto;
}

#dienst1 {
    margin-left: 90px;
    position: relative;
    display: inline-block;
    height: 500px;
    width: 100px;
    box-shadow: 0px 0px 30px 0px #000;
    overflow: hidden;
}

#dienst2 {
    margin-left: 90px;
    position: relative;
    display: inline-block;
    height: 500px;
    width: 100px;
    box-shadow: 0px 0px 30px 0px #000;
    overflow: hidden;    
}

#dienst3 {
    margin-left: 90px;
    position: relative;
    display: inline-block;
    height: 500px;
    width: 100px;
    box-shadow: 0px 0px 30px 0px #000;
    overflow: hidden;    
}

#dienst2 img{
    height: 300px;
    width: 450px;
}

<div class="diensten">
    <div id="dienst1">
        <h2>Ontruimingsoefening</h2>
        <p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken. </p>
        <img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
    </div>

    <div id="dienst2">
        <h2>beheer brandmeldinstallatie</h2>
        <p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.
        <img src="Foto's/IMG_2704.JPG">  
       </p>
    </div>
        <div id="dienst3">
        <h2>beheer brandmeldinstallatie</h2>
        <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text .
        <img src="Foto's/IMG_2704.JPG">  
       </p>
    </div>
 </div>

Answer 2

If you are going to add 3 divs next to each other you need to reduce the width of each div.

500px for each one aint gonna work unless your target audience is that of large desktop;

anyway I reduced it to 300px for both height and width, and made the overflow to scroll for y axis.

If you want to remove the scroll. (remove overflow-y: scroll; and all the styling) and specify the height so that the content of all the divs is visible)

View in Fullscreen(Stackoverflow forces resize)

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


.diens{
  width:300px;
  height:300px;
  font-family:sans-serif;
  box-shadow:0px 1px 3px rgba(0,0,0,.6);
  padding:20px;
  float:left;
  overflow-y: scroll;
  margin-right:10px;
}

.diens h2{
  margin: 20px 0px;
}

.diens p{
  font-size:14px;
}

.diens::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.diens::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}


.diens::-webkit-scrollbar-thumb
{
	background-color: #373737;
	border: 2px solid #F5F5F5;
}

<body>
  <div class="diensten">
    <div id="dienst1" class="diens">
        <h2>Ontruimingsoefening</h2>
        <p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken. </p>
    </div>

    <div id="dienst2" class="diens">
        <h2>beheer brandmeldinstallatie</h2>
        <p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken.
       </p>
    </div>
  
  <div id="dienst3" class="diens">
        <h2>beheer brandmeldinstallatie</h2>
        <p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek. 
       </p>
    </div>
 </div> 
</body>

Answer 3

Divs are initially block level elements. This means, among other things, that they each appear on their own lines. There are several ways to put two divs along side each other. Which one you choose will come down to the desired effect (and side effects) you want. Here are some options:

• Float them (float: left)
• Make them inline block (display: inline-block)
• Use flexbox (apply display: flex to their parent)
• Make them grid items (apply display: grid to their parent; very new feature and requires fallbacks)

I suggest you read up on CSS layout methods. Each method is a useful tool, and none is a one-size-fits-all solution. You should try to get familiar with them all. A great resource to get started is learnlayout.com. Once you get the basics down, if you want to dive deeper, you can check out my book.

Answer 4

You should add display:inline;and remove margin

#dienst1 {
    margin-left: 90px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
    display:inline;
}

#dienst2 {

   height: 500px;
   width: 500px;
   box-shadow: 0px 0px 30px 0px #000;
   display:inline;
}

Answer 5

Add display: flex to the parent, and remove the huge margin-left on #dienst2 - or don't, isn't necessary, but I did since you want them to be beside one another. Any other elements you put adjacent to them will display in the same row.

.diensten h2 {
    padding-top: 40px;
}

.diensten p, h2 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    padding: 20px;
}

.diensten {
    position: relative;
    height: 500px;
    background-color: #FFFFFF;
    margin: auto;
  display: flex;
}

#dienst1 {
    margin-left: 90px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 {
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 img{
    height: 300px;
    width: 450px;
}

<div class="diensten">
  <div id="dienst1">
    <h2>Ontruimingsoefening</h2>
    <p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast
      worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken. </p>
    <img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
  </div>

  <div id="dienst2">
    <h2>beheer brandmeldinstallatie</h2>
    <p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen
      en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een
      visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.
      <img src="Foto's/IMG_2704.JPG">
    </p>
  </div>
</div>