Problemer med CSSen

Mighty

17. mars 2016

Hei,

jeg har slitt i et par timer nå med hva jeg tror det burde være en (flaut) enkel løsning på.

Jeg har to divs der den ene flyter til venstre, den andre til høyre.

http://bildr.no/thumb/SUJpYXB0.jpeg

Teksten "Studio Galleri 1" er div'en "left", alle bildene ligger i div'en "right".

Problemet er at teksten ikke vil legge seg på samme linje som bildene, som skal fremgå av bildet ovenfor. (Teksten legger seg altså ikke helt på toppen av siden)

HTML:

Kode

<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="wrap">

<div id="left">


  <h1>Studio Galleri<br/> 1</h1>


</div>


<section id="right">

  <img src="images/1.jpg">
  <img src="images/2.jpg">
  <img src="images/3.jpg">
  <img src="images/4.jpg">
  <img src="images/5.jpg">
  <img src="images/6.jpg">
  <img src="images/7.jpg">
  <img src="images/8.jpg">
  <img src="images/9.jpg">
  <img src="images/10.jpg">
  <img src="images/11.jpg">
  <img src="images/12.jpg">

  <img src="images/14.jpg">
  <img src="images/15.jpg">
</section>
</div>
</body>

</html>

CSS:

Kode

.wrap {
    position: relative;
}

#left {
  top: 0;
	float:left;
	width:20%;
	font-family: Georgia;
	font-size: 2.5vw;



}

#right {
	position: absolute;
	width:80%;
	float: right;
  top: 1;
  right: 0;




  /* Prevent vertical gaps */
  line-height: 0;
   
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;  

}

#right img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #right {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #right {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #right {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #right {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

Er det noen kloke hoder der ute som ser en løsning? Jeg har googlet og googlet, men ikke kommet til noen løsning.

Takk!