How can I place next to each other some containers? HTML/CSS

Question

I want to place two or more containers inline here is my HTML code:

<div id="containers-place">
      <div style="padding: 16px;">
       <a href="https://google.com/" target="blank" style="text-decoration: none;"><div class="container" style="width: 20%;">
       <img src="picture1.png" width="100%">
       <h4>Picture One</h4>
       <p>As you can see this is picture One</p>
       </div></a>
      </div>
      <div id="idk" style="padding: 16px;">
        <a href="https://google.com/" target="blank" style="text-decoration: none;"><div class="container" style="width: 20%;">
        <img src="picture2.png" width="100%">
        <h4>Picture2</h4>
        <p>As you can see this is picture Two</p>
        </div></a>
      </div>

And the CSS:

.container {
  padding: 16px;
  background-color: #333333;
  color: #fff;
  display: block;
}

I took a screenshot of the browser: screenshoot

You seem to have misunderstood `inline`. Check out this guides and examples in this [doc](https://developer.mozilla.org/en-US/docs/Web/CSS/display) — Anurag Srivastava, Apr 02 '20 at 16:53
@vargaking I have added my answer you can verify and let me know. — Manjuboyz, Apr 02 '20 at 17:04

score 0 · Answer 1 · answered Apr 02 '20 at 16:48

0

You are making the containers take whole row by declaring their display css property as block. That's wrong, You have to use something like that:

/* Well, there is the easiest way to make them inline and also correctly positioned */
/* But there are also several ways to make them well-fitting HTML elements using Flexbox, Grid, Float properties and etc. */

display: inline-block; /* it could be only  "inline"  too, but you have to use it when you want your element positioned "absolute" */

So, replace it with your display: block property of .container class

answered Apr 02 '20 at 16:48

azizbek masharibov

113
6

it doesn't works, but thanks for the answer – vargaking Apr 02 '20 at 16:50
hmm doesn't work? why? Is there any property in parent class that is blocking them to be inline blocks? If it doesn't work, you can use other Grid, Flex/Flexbox systems too =D. WIsh you luck in your projects! – azizbek masharibov Apr 02 '20 at 16:52

score 0 · Answer 2 · answered Apr 02 '20 at 16:48

use flex for this kind of thing:

#container{
display:flex;
}

<div id="container">
      <div style="padding: 16px;">
       <a href="https://google.com/" target="blank" style="text-decoration: none;"><div class="container" style="width: 20%;">
       <img src="picture1.png" width="100%">
       <h4>Picture One</h4>
       <p>As you can see this is picture One</p>
       </div></a>
      </div>
      <div id="idk" style="padding: 16px;">
        <a href="https://google.com/" target="blank" style="text-decoration: none;"><div class="container" style="width: 20%;">
        <img src="picture2.png" width="100%">
        <h4>Picture2</h4>
        <p>As you can see this is picture Two</p>
        </div></a>
      </div>

score 0 · Answer 3 · answered Apr 02 '20 at 16:51

You can use flex for that

<div id="containers-place"class='flexrow'>
      <div style="padding: 16px;" class='flexcolumn'>
       <a href="https://google.com/" target="blank" style="text-decoration: none;"><div style="width: 20%;">
       <img src="picture1.png" width="100%">
       <h4>Picture One</h4>
       <p>As you can see this is picture One</p>
       </div></a>
      </div>
      <div id="idk" style="padding: 16px;" class='flexcolumn'>
        <a href="https://google.com/" target="blank" style="text-decoration: none;"><div style="width: 20%;">
        <img src="picture2.png" width="100%">
        <h4>Picture2</h4>
        <p>As you can see this is picture Two</p>
        </div></a>
      </div>

css

.flexrow{
 display: flex;
 flex-direction: row

}
.flexcolumn{
 //you can adjust width if you want
}

score 0 · Answer 4 · answered Apr 02 '20 at 16:54

add display:flex to div with id container-place.

.container {
  padding: 16px;
  background-color: #333333;
  color: #fff;
}
#containers-place {
  display:flex;
  flex-direction:row;
}

<div id="containers-place">
    <div style="padding: 16px;">
        <a href="https://google.com/" target="blank" style="text-decoration: none;">
            <div class="container" style="width: 20%;">
                <img src="picture1.png" width="100%">
                <h4>Picture One</h4>
                <p>As you can see this is picture One</p>
            </div>
        </a>
    </div>
    <div id="idk" style="padding: 16px;">
        <a href="https://google.com/" target="blank" style="text-decoration: none;">
            <div class="container" style="width: 20%;">
                <img src="picture2.png" width="100%">
                <h4>Picture2</h4>
                <p>As you can see this is picture Two</p>
            </div>
        </a>
    </div>
</div>

Manjuboyz · Answer 5 · 2020-04-02T17:40:43.430

Here is what you need:

I also removed your inline code for container and made a selector class for easy maintenance, you can increase/decrease the width or height as per your need.

#containers-place {
  display: flex;
  flex-direction: row;
}

.container {
  padding: 16px;
  background-color: #333333;
  color: #fff;
  /*Change the width as per your requirement */
  width: 80%;
}

<div id="containers-place">
  <div style="padding:16px;">
    <a href="https://google.com/" target="blank" style="text-decoration: none;">
      <div class="container">
        <img src="http://placekitten.com/301/301" width="100%">
        <h4>Picture One</h4>
        <p>As you can see this is picture One</p>
      </div>
    </a>
  </div>
  <div id="idk" style="padding: 16px;">
    <a href="https://google.com/" target="blank" style="text-decoration: none;">
      <div class="container">
        <img src="http://placekitten.com/301/301" width="100%">
        <h4>Picture2</h4>
        <p>As you can see this is picture Two</p>
      </div>
    </a>
  </div>
</div>

Adding Space-between between items:

justify-content

#containers-place {
  display: flex;
  flex-direction: row;
  width: 800px; /* if you need distance between container then fix this */
  border: 1px solid red;
  justify-content: space-between; /* this will move item */
}

.container {
  padding: 16px;
  background-color: #333333;
  color: #fff;
  width: 200px;
}

<div id="containers-place" class="MainClass">

  <div style="padding:16px;">
    <a href="https://google.com/" target="blank" style="text-decoration: none;">
      <div class="container">
        <img src="http://placekitten.com/301/301" width="100%">
        <h4>Picture One</h4>
        <p>As you can see this is picture One</p>
      </div>
    </a>
  </div>
  <div id="idk" style="padding: 16px;">
    <a href="https://google.com/" target="blank" style="text-decoration: none;">
      <div class="container">
        <img src="http://placekitten.com/301/301" width="100%">
        <h4>Picture2</h4>
        <p>As you can see this is picture Two</p>
      </div>
    </a>
  </div>

</div>

thanks! it works. How can I set distance between the containers? — vargaking, Apr 02 '20 at 17:19
I have updated the second snippet for the space, check that out. If you need space then please set the width for the parent and then choose how much ever space you need. I suggest look into the `justify` property to play around. — Manjuboyz, Apr 02 '20 at 17:33

score 0 · Answer 6 · answered Apr 02 '20 at 16:57

is a block element and it's acting like a block.You should change that behavior of the tag using custom css.

 <div id="containers-place">
          <div class="Main_Container" style="padding: 16px;">
           <a href="https://google.com/" target="blank" style="text-decoration:none;">
              <div class="container" style="width: 100%;">
               <img src="picture1.png" width="100%">
               <h4>Picture One</h4>
            <p>As you can see this is picture One</p>
           </div> 
           </a>
          </div>
          <div class="Main_Container" id="idk" style="padding: 16px;">
         <a href="https://google.com/" target="blank" style="text-decoration:none;"> 
           <div class="container" style="width: 100%;">
            <img src="picture2.png" width="100%">
            <h4>Picture2</h4>
            <p>As you can see this is picture Two</p>
            </div></a>
          </div>

    custom CSS Codes 


.container {
      padding: 16px;
      background-color: #333333;
      color: #ffffff;
      display: inline-block;
}

.Main_Container{
      display: inline-block;
}

How can I place next to each other some containers? HTML/CSS

6 Answers6