-2

Hello everyone i have a header with a div in my header with a pic in it but i want to display my pics next to eachother but instead of that its displays it under each other how can i fix this i tried to change my css but didnt work.

its now like this when i add anoter div

How it is now:

enter image description here

I want it like this:

enter image description here

this is my code

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i');
html,
body {
  margin: 0;
  height: 120%;
  font-family: 'Josefin Sans', sans-serif;
}

.header {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  height: 50vw;
  min-height: 400px;
  max-height: 550px;
  min-width: 300px;
  color: #eee;
}

.header:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  transform: translateZ(0);
  background: #1B2030 url(https://unsplash.it/1999/999?image=1063) top center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  animation: grow 60s linear 10ms infinite;
  transition: all 0.2s ease-in-out;
  z-index: -2
}

.header a {
  color: #eee
}

.info {
  width: 100%;
  padding: 25% 10% 0 10%;
  text-align: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2)
}

.author {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(http://favim.com/media/uploads/images/610/140308/black-n-white-cute-funny-iron-man-Favim.com-1462744.jpg) center no-repeat;
  background-size: cover;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  margin-bottom: 3px
}

.info h4,
.meta {
  font-size: 0.7em
}

.meta {
  font-style: italic;
}

.twtr {
  margin-top: 100px
}

.btn.twtr:after {
  content: "\1F426";
  padding-left: 5px
}
<body>
  <div class="header">
    <div class="info">
      <h1>TestHeader</h1>
      <div class="meta">
        test
      </div>
      <div class="meta">
        <a href="https://twitter.com/nodws" target="_b" class="author"></a><br> By <a href="https://twitter.com/nodws" target="_b">James Nodws</a> on May 30, 2017
      </div>
    </div>
  </div>
</body>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
manery
  • 1
  • 1
  • 3
  • 3
    Possible duplicate of [How do you make div elements display inline?](https://stackoverflow.com/questions/224602/how-do-you-make-div-elements-display-inline) and [How to place two divs next to each other?](https://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other) – cнŝdk Aug 20 '18 at 07:44

5 Answers5

1

You First Have clear the body from margin and padding just in case 

body{padding:0;margin:0;}

after that give each div 25% width and display either inline or inline-block

div{width:25%;display:inline;}
Abd Alrahman Fani
  • 46
  • 1
  • 6
0

Add :

.meta {
    display: inline-block
}

div are int display mode block by default, so it wraps the entire ligne. Change to inline-block to allow multiple divs horizontally

לבני מלכה
  • 15,925
  • 2
  • 23
  • 47
CZ54
  • 5,488
  • 1
  • 24
  • 39
0

I think you should try using .

.meta { display : flex; }

This also aligns all the the <divs> in a single row

Edmund1645
  • 309
  • 1
  • 2
  • 13
0

You have two options here

  1. You can use Bootsrap as described in here.

  2. Use below CSS

    .meta { float:left; width: 30%; }

You can use any other class which is applied only for image divs.

Arun Kumar
  • 885
  • 5
  • 11
0

you can use flex property for,

Display:flex apply flex layout to the flex items or children of the container only. So, the container itself stays a block level element and thus takes up the entire width of the screen. ... Display:inline-flex apply flex layout to the flex items or children as well as to the container itself.

neel upadhyay
  • 344
  • 2
  • 10