Placing 2 div side by side?

asasass · November 3, 2017, 6:18am

What’s a really simple way to do this?

<style>
  #container {
    background-color: black;
    position: relative;
    width: 260px;
    height: 194px;
    padding: 0;
    border: 3px solid #0059dd;
  }
  
  #img1,
  #img2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  #img1 {
    clip-path: circle(85px at center);
  }
  
  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    cursor: pointer;
    background-color: transparent;
    ;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }
  
  #playButton4 {
    position: relative;
    width: 260px;
    height: 194px;
    cursor: pointer;
  }
  
  .button div {
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }

</style>

<div id="container">
  <img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
  <img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.pn">
  <div id="grad">





    <div id="playButton4" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
button.querySelector('.play').style.display='none';
button.querySelector('.pause').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

      <div class="button">
        <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
        </div>
        <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
        </div>
      </div>
    </div>
  </div>
</div>

<audio id="player4" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
  </source>
</audio>






<style>
  #container {
    background-color: black;
    position: relative;
    width: 260px;
    height: 194px;
    padding: 0;
    border: 3px solid #0059dd;
  }
  
  #img1,
  #img2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  #img1 {
    clip-path: circle(85px at center);
  }
  
  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    cursor: pointer;
    background-color: transparent;
    ;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }
  
  #playButton4 {
    position: relative;
    width: 260px;
    height: 194px;
    cursor: pointer;
  }
  
  .button div {
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }

</style>

<div id="container">
  <img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
  <img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.pn">
  <div id="grad">





    <div id="playButton4" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
button.querySelector('.play').style.display='none';
button.querySelector('.pause').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

      <div class="button">
        <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
        </div>
        <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
        </div>
      </div>
    </div>
  </div>
</div>

<audio id="player4" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
  </source>
</audio>

John_Betong · November 3, 2017, 7:15am

There is no simple solution since the script extract has far too many errors and warnings.

Maybe try this:

Edit:
Forgot to add about getting a good text editor.

There are numerous free editors available. You will not only save yourself and others a vast amount of problems

TechnoBear · November 3, 2017, 9:21am

As ever with CSS, there are a number of ways to place two divs side by side, several involving very simple CSS.

If you are going to persist with any form of “coding”, then I would suggest it is long past time you stopped playing with complicated code you don’t understand and take a few days to learn some CSS basics, so that you do not have to continually rely on others to do everything for you.

There are numerous free online courses and tutorials which will give you a basic grounding.

asasass · November 3, 2017, 5:16pm

I’m going to simplify it.

asasass · November 3, 2017, 11:21pm

I just simplified the codes, how would I place these 2 div side by side?

Code 1

<style>

  #container1 {
    background-color: black;
    position: relative;
    width: 260px;
    height: 194px;
    padding: 0;
    border: 3px solid #0059dd;
  }
  
  #img1,
  #img2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  #img1 {
    clip-path: circle(85px at center);
  }
  
  #grad1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }

</style>
<div id="container1">
  <img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
  <img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.png">
  <div id="grad1"></div>
</div>

Code 2

<style>
  #container2 {
    position: relative;
    background-color: black;
    width: 260px;
    height: 194px;
    padding: 0;
    border: 3px solid #0059dd;
    margin-top: 8px;
    cursor: pointer;
  }
  
  #grad2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }

</style>

<div id="container1">

  <svg width="260" height="194">
    <defs>
      <clipPath id="circleView">
        <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange"></circle>
      </clipPath>
    </defs>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>
  </svg>
  <div id="grad2">
  </div>

asasass · November 3, 2017, 11:38pm

Can someone show me how to use this?

I have no idea how to use this code.

<DIV id=”container”>
<DIV style=”float:left; background-color:magenta; width:100px; height:100px; margin-top: 200px; margin-left: 100px;”> first div</DIV>
<DIV style=”float:right; background-color:green; width:100px; height:100px; margin-top: 100px; margin-left: 200px;”>second div</DIV>
</DIV>

asasass · November 4, 2017, 12:36am

I did it.

<style>
body { display: flex; }
</style>

<style>
  #container1 {
    background-color: black;
    position: relative;
    width: 260px;
    height: 194px;
    padding: 0;
    border: 3px solid #0059dd;
 margin:5px;
  }
  
  #img1,
  #img2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  #img1 {
    clip-path: circle(85px at center);
  }
  
  #grad1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }

</style>
<div id="container1">
  <img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
  <img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.png">
  <div id="grad1"></div>
</div>

<br>


<style>
  #container2 {
    position: relative;
    background-color: black;
    width: 260px;
    height: 194px;
    padding: 0;
    border: 3px solid #0059dd;
    cursor: pointer;
 margin:5px;

  }
  
  #grad2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-color: transparent;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }

</style>

<div id="container2">

  <svg width="260" height="194">
    <defs>
      <clipPath id="circleView">
        <circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange"></circle>
      </clipPath>
    </defs>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
    <image x="50%" y="50%" transform="translate(-90 -90)" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>
  </svg>
  <div id="grad2">
  </div>

TechnoBear · November 4, 2017, 10:41am

The CSS float property is pretty simple and something you should really have learned long ago, so I suggest you take a few minutes now to get to grips with it.

https://tympanus.net/codrops/css_reference/float/

https://css-tricks.com/almanac/properties/f/float/

(I keep pointing you to those two resources, so maybe you should bookmark them for future reference.)

0_0Nathan · November 8, 2017, 11:23am

Your idea got them next to each other the problem is if you scale the website you will notice sudden changes to the container.

All I did is added float:left to the #container{} unfortunately its not responsive simply because using any % would mean placing it on everything such as the container and the images as well otherwise the content inside the container will overlap or shift out of position.

Simply applying float:left to the container forces the content to shift next to the other element unfortunately without responsive design if the window gets smaller than both divs placed inside it will force the second dive to move down causing alot of white space thats why people use display:flex; but as i said it will work but that would mean changing everything inside the div to a % otherwise content will begin to shift or overflow.

ifourprayag · January 11, 2018, 11:05am

You can use bootstrap’s row class to do so…

<div class="row">
        <div class="col-*-6">
        </div>
        <div class="col-*-6">
        </div>
</div>

PaulOB · January 11, 2018, 11:17am

Not if you are not using bootstrap to start with!

Please do not reply to old threads and then add irrelevant, or ill-constructed comments please.

system · April 12, 2018, 6:17pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.