0

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600|Lato|Montserrat&subset=greek);

body
{
 background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.desc
{
 margin-top: 40px;
 text-align: center;
 font-size: 100px;
 color: darkred;
}
.cool
{
 display: inline-block;
 width: 100%;
}

.topbar
{
 position: fixed;
 top: 0px;
 width: 100%;
    right: 0px;
 background-color: tomato;
 text-align: right;
 height: 50px;
 z-index: 100;
}

.texti
{
 margin-right: 15px;
}

.linkur
{
 border: 1px solid black;
 padding: 8.5px;
 margin-right: 10px;
 text-decoration: none;
 border-color: transparent;
 font-size: 1.3em;
 color: darkred;
}
.linkur:hover
{
 background-color: lightblue;
 opacity: 0.7;
}

label
{
 position: fixed;
 top: -2000px;
}

.mynd
{
 position: fixed;
 top: -50px;
 left:20px;
}

.navigation
{
 height: 96%;
 width: 20%;
 background-color: tomato;
}

.logo
{
 position: fixed;
 top: -100px;
}

.hlid
{
  position: fixed;
  left: -2000px;
  width: 700px;
  height: 90%;
  z-index: 100;
  margin-right: 20px;
}

.main
{
 position: relative;
 left: 3%;
 width: 30%;
 text-align: center;
 height: 30%;
 display:inline-block;
 margin-right:10px;
 margin-left:10px;
 margin-bottom:10px;
}
/*
.main2
{
 position: relative;
 right: -3%;
 width: 30%;
 text-align: center;
    display:inline-block;
 margin-right:10px;
 margin-left:10px;
 margin-bottom:10px;
}
*/
.leikur2
{
 float: right;
}

.leikjatexti
{
  border: 1px solid black;
  border-radius: 20px;
  text-decoration: none;
  margin-bottom: 10px;
  padding-top: 5px;
  margin-top: 10px;
  background-color: tomato;
  height: auto;
}

.text2
{
 text-decoration: none;
 color: darkred;
}
@media screen and (max-width: 48em){


.mynd2
{
 height: 150px;
 width: 70px;
 margin-top: 10px;
}

.desc
{
 font-size: 45px;
}
.topbar
{
 text-align: left;
}

.linkur
{
 position: fixed;
 top: -100px;
}
 
input {
  display: none;
}
label,
label {
  position: fixed;
  top: -27px;
  left: 5px;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  transition: all .15s ease;
  font-size: 30px;
  z-index: 100;
}
label:hover {
  color: darkred;
}

input:checked ~ .hlid {
  position: fixed;
  left: -50px;
  height: 18%;
  top: 30px;
  transition: all .15s ease;
}
li
{
 list-style-type: none;
}

.hlidlinkur
{
 margin-bottom: 20px;
 margin-left: 10px;

}

.hlidlinkura
{
 border: 1px solid black;
 padding: 7px;
 text-align: center;
 border-color: transparent;
 text-decoration: none;
 color: darkred; 
 font-size: 1.1em;
}

.hlidlinkura:hover
{
 background-color: lightblue;
}
}
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">

var randnum = Math.random();
var inum = 3;

var rand1 = Math.round(randnum * (inum-1)) + 1;
images = new Array
images[1] = "img/shi.jpg"
images[2] = "img/halo.jpg"
images[3] = "img/franklin.jpg"

var image = images[rand1]

</script>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta charset="utf-8">
 <title>Main site</title>
 <link rel="stylesheet" href="Gru_games.css" type="text/css" />
 
</head>
<body>
<script language="JavaScript">

document.write('<body background="' + image + '" text="white">')

</script>
<nav class="topbar">
  <a href="Gru_main.html"><img class="mynd" src="project.png"></a>
  <ul class="texti">
    <a href="" class="linkur">Games</a>
    <a href="" class="linkur">Profile</a>
    <a href="" class="linkur">My Cart</a>
  </ul>
</nav>


<input type="checkbox" id="toggle">
<label for="toggle"><p>&#9776</p></label>
      <nav class="hlid">
        <ul class="navigation">
          <li class="hlidlinkur"><a class="hlidlinkura" href="#">Games</a><li>
          <li class="hlidlinkur"><a class="hlidlinkura" href="#">Profile</a></li>
          <li class="hlidlinkur"><a class="hlidlinkura" href="#">My cart</a></li>
        </ul>
      </nav>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>

<h1 class="desc">Games</h1>

<div class="cool">
 <div class="main">
  <a class="text2" href="Gru_login.html">
    <div class="leikjatexti">
      <img class="mynd2" src="walking.jpg" alt="Walking Dead" height="152" width="120">
       <h1>The Walking Dead</h1>
      <p>
      viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
      til að velja rétt og fá rétta endann.

      </p>
    </div>
   </a> 
 </div>


 <div class="main">  
     <a class="text2" href="Gru_login.html"> 
    <div class="leikjatexti">
      <img class="mynd2"  src="portal2.jpg" alt="portal" height="152" width="120">
          <h1>Portal 2</h1>
         <p>
            Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
             í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
         </p>
       </div>
  </a>
 </div>



  <div class="main">
  <a class="text2" href="Gru_login.html">
    <div class="leikjatexti">
      <img class="mynd2" src="blackops.png" alt="Black ops" height="152" width="120">
       <h1>COD: Black Ops III</h1>
      <p>
      viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
      til að velja rétt og fá rétta endann.

      </p>
    </div>
   </a> 
 </div>


 <div class="main">  
     <a class="text2" href="Gru_login.html"> 
    <div class="leikjatexti">
      <img class="mynd2"  src="borderlands.jpg" alt="portal" height="152" width="120">
          <h1>Borderlands</h1>
         <p>
            Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
             í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
         </p>
       </div>
  </a>
 </div>



  <div class="main">
  <a class="text2" href="Gru_login.html">
    <div class="leikjatexti">
      <img class="mynd2" src="gta.jpg" alt="GTA V" height="152" width="120">
       <h1>Grand Theft Auto V</h1>
      <p>
      viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
      til að velja rétt og fá rétta endann.

      </p>
    </div>
   </a> 
 </div>

 <div class="main">  
     <a class="text2" href="Gru_login.html"> 
    <div class="leikjatexti">
      <img class="mynd2"  src="tombraider.jpg" alt="TR" height="152" width="120">
          <h1>Tombraider 2014</h1>
         <p>
            Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
             í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
         </p>
       </div>
  </a>
 </div>



 <div class="main">
  <a class="text2" href="Gru_login.html">
    <div class="leikjatexti">
      <img class="mynd2" src="destiny.jpg" alt="Destiny" height="152" width="120">
       <h1>Destiny</h1>
      <p>
      viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
      til að velja rétt og fá rétta endann.

      </p>
    </div>
   </a> 
 </div>


 <div class="main">  
     <a class="text2" href="Gru_login.html"> 
    <div class="leikjatexti">
      <img class="mynd2"  src="rambo.jpg" alt="Rambo" height="152" width="120">
          <h1>Rambo: The Video Game</h1>
         <p>
            Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
             í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
         </p>
       </div>
  </a>
 </div> 


 <div class="main">
  <a class="text2" href="Gru_login.html">
    <div class="leikjatexti">
      <img class="mynd2" src="nba2k.jpg" alt="NBA" height="152" width="120">
       <h1>NBA 2K16</h1>
      <p>
      viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
      til að velja rétt og fá rétta endann.

      </p>
    </div>
   </a> 
 </div>


 <div class="main">  
     <a class="text2" href="Gru_login.html"> 
    <div class="leikjatexti">
      <img class="mynd2"  src="ratchet.jpg" alt="R&C" height="152" width="120">
          <h1>Ratchet&Clank: A crack in time </h1>
         <p>
            Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
             í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
         </p>
       </div>
  </a>
 </div>

      <div class="main">
  <a class="text2" href="Gru_login.html">
    <div class="leikjatexti">
      <img class="mynd2" src="bloodborne.jpg" alt="Bloodborne" height="152" width="120">
       <h1>Bloodborne</h1>
      <p>
      viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
      til að velja rétt og fá rétta endann.

      </p>
    </div>
   </a> 
 </div>


 <div class="main">  
     <a class="text2" href="Gru_login.html"> 
    <div class="leikjatexti">
      <img class="mynd2"  src="evolve.jpg" alt="evolve" height="152" width="120">
          <h1>Evolve</h1>
         <p>
            Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
             í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
         </p>
       </div>
  </a>
 </div>
 
</div>
</body>

emphasized text

I can't seem to make the boxes(Columns) go to equal height, i've tried putting a height on them and i don't have any more ideas than that really. any feedback would be very well appreciated, Ps: Some icelandic words may be in the code

Eyþór Þórlindsson
  • 13
  • 2

2 Answers2

0

if you set the Height of the .leikjatexti class, the boxes will have the same height;

you have to align the boxes because the middle one is a little above of the others, but the heights of them will be equal

JDalri
  • 378
  • 5
  • 21
0

This following examples may help you. They use use display:flexbox as used in CSS3. Here is a small guide on flexbox.

The snippets create flexbox containers. The difference between the the justify-content: flex-start; and justify-content: space-around;

whereas the first one might have an alignment tending to the left, it will not crete weird outputs in places where there are column amounts not divisible by 3(For example having 5 rows). 

.flex-container{
  background-color: blue;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: stretch; 
}

.flex-item{
 background-color: white;
 flex-basis: 30%;
 margin: 10px;
 align-self: stretch;
 box-sizing: border-box;
 height: 400px;
 

}
<div class="flex-container">
  <p class="flex-item">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla orci sed dui faucibus, vel tempus urna maximus. Phasellus fermentum orci mi, nec ultrices libero blandit sed. Mauris congue sem lacus, id porta velit faucibus quis. Nulla turpis odio,
    fringilla vitae luctus sed, auctor ut nisl. Curabitur pharetra scelerisque interdum. Vivamus sit amet eros consectetur, feugiat urna sit amet, hendrerit libero. Aliquam rutrum finibus ipsum at efficitur. Donec dolor elit, suscipit consectetur dui
    sed, tristique mattis magna. Mauris porttitor at justo sit amet sodales. Cras ut tellus risus.
  </p>

  <p class="flex-item">
    Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce luctus, nibh eu sodales laoreet, ante nisi faucibus odio, eu pharetra ante urna ut purus. Fusce rutrum orci accumsan arcu porta aliquam. Donec est velit, consectetur venenatis efficitur
  </p>

  <p class="flex-item">
    quis, pharetra aliquam urna. Suspendisse in tincidunt felis. Phasellus nec elit sit amet sem viverra ullamcorper ut sed nunc. Nulla gravida rutrum porttitor. Proin nulla sapien, ullamcorper nec placerat quis, eleifend ut dolor. Proin tempor quis felis
  </p>

  <p class="flex-item">
    quam sodales sit amet. Duis interdum augue quis scelerisque congue. Duis et imperdiet lorem. Quisque tincidunt, ex a gravida congue, mauris eros sollicitudin metus, a porta massa quam et nisi. Curabitur orci erat, pellentesque eu dui ac, rhoncus lobortis
  </p>

  <p class="flex-item">
    ante. Nullam suscipit in risus quis iaculis. Cras sed quam leo. Aliquam aliquam dolor vel tellus ultrices pharetra. Donec laoreet ornare sapien non eleifend. Phasellus nec dui dui. Pellentesque auctor luctus nisl. Cras elit tellus, posuere eget nisl vitae,
    semper ultrices dui. Cras porta orci tortor. Integer tristique enim quis convallis aliquet. Integer eu neque tellus. Pellentesque ut quam tincidunt, iaculis mi sed, aliquam dui. Sed vulputate dolor sed ante posuere tempor. In quis dapibus eros. In
    hac
  </p>


</div>

In this second one you have great alignment but you must ensure that you have an amount of columns that is divisible by 3 (3,6,9,12 ... etc.)

.flex-container{
  background-color: blue;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch; 
}

.flex-item{
 background-color: white;
 flex-basis: 30%;
 align-self: stretch;
 box-sizing: border-box;
 height: 400px;
 

}
<div class="flex-container">
  <p class="flex-item">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla orci sed dui faucibus, vel tempus urna maximus. Phasellus fermentum orci mi, nec ultrices libero blandit sed. Mauris congue sem lacus, id porta velit faucibus quis. Nulla turpis odio,
    fringilla vitae luctus sed, auctor ut nisl. Curabitur pharetra scelerisque interdum. Vivamus sit amet eros consectetur, feugiat urna sit amet, hendrerit libero. Aliquam rutrum finibus ipsum at efficitur. Donec dolor elit, suscipit consectetur dui
    sed, tristique mattis magna. Mauris porttitor at justo sit amet sodales. Cras ut tellus risus.
  </p>

  <p class="flex-item">
    Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce luctus, nibh eu sodales laoreet, ante nisi faucibus odio, eu pharetra ante urna ut purus. Fusce rutrum orci accumsan arcu porta aliquam. Donec est velit, consectetur venenatis efficitur
  </p>

  <p class="flex-item">
    quis, pharetra aliquam urna. Suspendisse in tincidunt felis. Phasellus nec elit sit amet sem viverra ullamcorper ut sed nunc. Nulla gravida rutrum porttitor. Proin nulla sapien, ullamcorper nec placerat quis, eleifend ut dolor. Proin tempor quis felis
  </p>

  <p class="flex-item">
    quam sodales sit amet. Duis interdum augue quis scelerisque congue. Duis et imperdiet lorem. Quisque tincidunt, ex a gravida congue, mauris eros sollicitudin metus, a porta massa quam et nisi. Curabitur orci erat, pellentesque eu dui ac, rhoncus lobortis
  </p>

  <p class="flex-item">
    ante. Nullam suscipit in risus quis iaculis. Cras sed quam leo. Aliquam aliquam dolor vel tellus ultrices pharetra. Donec laoreet ornare sapien non eleifend. Phasellus nec dui dui. Pellentesque auctor luctus nisl. Cras elit tellus, posuere eget nisl vitae,
    semper ultrices dui. Cras porta orci tortor. Integer tristique enim quis convallis aliquet. Integer eu neque tellus. Pellentesque ut quam tincidunt, iaculis mi sed, aliquam dui. Sed vulputate dolor sed ante posuere tempor. In quis dapibus eros. In
    hac
  </p>

  <p class="flex-item">
    ante. Nullam suscipit in risus quis iaculis. Cras sed quam leo. Aliquam aliquam dolor vel tellus ultrices pharetra. Donec laoreet ornare sapien non eleifend. Phasellus nec dui dui. Pellentesque auctor luctus nisl. Cras elit tellus, posuere eget nisl vitae,
    semper ultrices dui. Cras porta orci tortor. Integer tristique enim quis convallis aliquet. Integer eu neque tellus. Pellentesque ut quam tincidunt, iaculis mi sed, aliquam dui. Sed vulputate dolor sed ante posuere tempor. In quis dapibus eros. In
    hac
  </p>

</div>

These two snippets might present an alternative to your layout. you might also want to checkout the CSS3 grid.

Omar Yafer
  • 823
  • 6
  • 17