CODEWITHSUNDEEP
htmlcss
Manos Kounelakis
Manos Kounelakis

Reputation: 3181

Make div appear next to other

I have started a huge revision on my css knowledge. I am trying to do the following: I want to create a wrapper div that contains to divs with some text and some content.I want each div with class item-2 inside that div to have a width:50% and appear next to another item-2. Here is a snippet of my code:

body{
  background:rgba(10,10,10,.8);
}
.wrapper{
  position:relative;
  width:100%;
  margin:auto;  
}
.item-2{
    text-align:center;
    display:inline-block;
    width:50%;
    border:2px solid blue;
 }
.demo{
  margin:auto;
  height:5em;
  width:5em;
  background:yellow;
}
<div class='wrapper'>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>

</div>

As you can see it's div appears below its previous div.However I want them to be next to each other.How can I achieve this? I would like an explanation to your solution sa as to improve my knowledge

Upvotes: 0

Views: 913

Answers (5)

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

Why is this happening?

Using inline-block in this way is perfectly valid and will work but you have two issues that are causing the elements to occupy separate lines:

  1. inline-block items honour the white-space between elements so there is an extra space between the two .item-2 divs
  2. The width of .item-2 is not 50% but 50% + 2px left border + 2px right border

How to fix

  1. There are multiple ways of getting round the white-space issue including setting font-size: 0;, however, as the height and width of .demo use ems you are probably best removing the white-space from between the elements in the HTML instead
  2. To ensure .item-2 actually has a width of 50% you can add box-sizing: border-box; which will make the width and height include the padding and border

body {
  background: rgba(10, 10, 10, .8);
}

.wrapper {
  margin: auto;
  position: relative;
  width: 100%;
}

.item-2 {
  border: 2px solid blue;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  width: 50%;
}

.demo {
  background: yellow;
  height: 5em;
  margin: auto;
  width: 5em;
}
<div class='wrapper'>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div><!--You can remove the white-space by adding a comment between the elements
  --><div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>
</div>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106058

aside float and flex, there's also:

  • display:table; 

body{
  background:rgba(10,10,10,.8);
}
.wrapper{
  position:relative;
  width:100%;
  margin:auto; 
  display:table;
  table-layout:fixed;/* to even cells and keep within width set */
}
.item-2{
    text-align:center;
    display:table-cell;
    border:2px solid blue;
 }
.demo{
  margin:auto;
  height:5em;
  width:5em;
  background:yellow;
}
<div class='wrapper'>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>

</div>

  • display:grid;

body{
  background:rgba(10,10,10,.8);
}
.wrapper{
  position:relative;
  width:100%;
  margin:auto; 
  display:grid;
  grid-template-columns:50% 50%;
}
.item-2{
    text-align:center;
    border:2px solid blue;
 }
.demo{
  margin:auto;
  height:5em;
  width:5em;
  background:yellow;
}
<div class='wrapper'>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>

</div>

Upvotes: 1

von verletzt
von verletzt

Reputation: 114

.wrapper display: flex;
.item-2 flex: 1;

Upvotes: 2

Farzin Kanzi
Farzin Kanzi

Reputation: 3433

Flex can keep them in one row.

.wrapper {
  display: flex;
 }

And remove display: inline block for items. If you want in small devices they are under each other add this to .wrapper

  flex-wrap: wrap;

And we need a min-width for items. .items: min-width: 250px;. If your device has enough space (500px) they will remain in one line, else the second item goes to next line.

Upvotes: 2

Chirag
Chirag

Reputation: 1022

Try this code...

body{
  background:rgba(10,10,10,.8);
}
.wrapper{
  position:relative;
  width:100%;
  margin:auto;  
}
.item-2{
    float:left;
    text-align:center;
    box-sizing: border-box;
    display:inline-block;
    width:50%;
    border:2px solid blue;
 }
.demo{
  margin:auto;
  height:5em;
  width:5em;
  background:yellow;
}
<div class='wrapper'>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>
  <div class='item-2'>
    <h1>Title 1</h1>
    <div class='demo'>
    </div>
  </div>

</div>

Upvotes: 1

Related Questions