CODEWITHSUNDEEP
htmlcss
EmalGod
EmalGod

Reputation: 9

I cant make pictures go side by side

I've tried to make an About Us page for my website but it doesn't seem like I can make the pictures go side by side. And by the way, I have looked at other posts but I don't really understand it.

.Button {
  background-color: Plum;
  border: 1px solid;
  border-color: black;
  padding: 10px 25px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  font-family: hacked;
  border-radius: 8px;
  text-color: black;
  text-shadow: 2px 2px grey;
}

.sub {
  position: relative;
}

.itmHolder {
  position: relative;
}

.itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
  position: absolute;
  top: 0;
}

.og {
  margin-top: 50px;
  position: center;
  text-align: center;
}

h1 {
  font-size: 400%;
  color: Plum;
  text-shadow: 4px 4px Black;
}

pre {
  font-size: 100%;
  color: Plum;
  text-shadow: 2px 2px Black;
}

body {
  background-image: url("lightning.gif");
  background-repeat: no-repeat;
  -webkit-transform: rotateX(0);
  background-size: cover;
  background-position: center center;
  min-height: 100vh;
}

a:link,
a:visited {
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.img-with-text {
  text-align: justify;
  width: [400px];
}

.img-with-text img {
  display: block;
  margin: 0 auto;
}

pret {
  font-size: 200%;
  color: Plum;
  text-shadow: 2px 2px Black;
}
<body background="background.jpg">
  <form action="selve websiten.html">

    <div class="og">
      <div class="itmHolder">

        <div class="sub">
          <button type="button" class="Button"><a href="selve_websiten.html">Frontpage</a></button>
          <button type="button" class="Button"><a href="buynow.html">Buy now</a></button>
        </div>

        <font size=6>
          <pre style="font-family:kenyan coffee;">
 Hello, our names is William and Emal.
 We've made this website for our own interest and trying to make a future for us.
 We are 14 and 15 years of age and, we both live in southern Denmark. 
 On this website we will mostly be selling steam items, games and etc.
 But in the future its possible we are going to be selling other stuff like clothing, cups and etc.</pre>
        </font>
        <div class="img-with-text">
          <img src="emal.png" alt="Emal" style="width:400px;height:400px;" />
          <center>
            <pret style="font-family:easycore;">Emal Sahari, Owner and Founder of Future</p>
          </center>
        </div>

        <div class="img-with-text">
          <img src="william.jpg" alt="William" style="width:400px;height:400px;" />
          <center>
            <pret style="font-family:easycore;">William Lauritsen, Owner and Founder of Future</p>
          </center>
        </div>
</body>

Upvotes: 0

Views: 34

Answers (2)

Arioch
Arioch

Reputation: 324

Let's try that : 

.container_img {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

and

<div class="container_img">
    <div class="img-with-text">
        <img src="emal.png" alt="Emal" style="width:400px;height:400px;" />
        <center><pret style="font-family:easycore;">Emal Sahari, Owner and Founder of Future</p></center>
    </div>

    <div class="img-with-text">
        <img src="william.jpg" alt="William" style="width:400px;height:400px;" />
        <center><pret style="font-family:easycore;">William Lauritsen, Owner and Founder of Future</p></center>
    </div>
</div>

Upvotes: 1

Timothy Lee
Timothy Lee

Reputation: 828

You mean <img src="emal.png"> and <img src="william.jpg"> go side by side?

try put them into inline-block element

<div>
  <span class="imgWrapper"><img src="emal.png"></span>
  <span class="imgWrapper"><img src="william.jpg"></span>
</div>
<style>
  .imgWrapper{
       display:inline-block;
       width:///;
       height:///;
   }
   .imgWrapper img{
        width:100%;
   }
</style>

Upvotes: 0

Related Questions