The problem I have is that when resizing the page, the div that includes the login and the images .dreta that is located to the right of the page, remains the same size and I would like it to be extended to the end.
I tried pornele: height:inherit; so that it is equal to height of div .content but still not extended, here I leave all the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Frikie Zone</title>
<link href="https://fonts.googleapis.com/css?family=Ceviche+One" rel="stylesheet"/>
<style type="text/css">
html{
background-color: #8ecfff;
}
.header{
background-color: #f0ecec;
margin:0;
font-size: 100%;
}
.header h1{
padding: 20px 0 20px 0;
margin:0;
font-family: 'Ceviche One', cursive;
font-size: 200px;
}
h2{
font-size: 60px;
}
.frikie{
background: linear-gradient(to right, #fdb2c9 0%, #e8ff3a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.zone{
background: linear-gradient(to right, #e8ff3a 0%, #fdb2c9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content{
margin:0;
}
.main{
width: 75%;
position: relative;
float: left;
background-color: aquamarine;
}
.form{
width: 25%;
position: relative;
float:right;
background-color: #bab9d0;
}
.form input{
margin: 0 10px 10px 0;
border-radius: 5px;
border: solid #c3b39e 2px;
}
input[name="user"]{
width: 60%;
}
input[name="pwd"]{
width: 60%;
}
.divimagenes{
width: 25%;
float: right;
position: relative;
background-color: #4c9eef;
}
p{
margin-left:30px;
margin-right:30px;
font-size: 20px;
}
.contact{
font-size: 9px;
}
.imagenesimg img{
margin-bottom: 67px;
}
.dreta{
height: inherit;
}
</style>
</head>
<body>
<div class="header" align="center">
<h1><span class="frikie">FRIKIE</span> <span class="zone">ZONE</span></h1>
</div>
<!--Main-->
<div class="content">
<div class="main">
<h2 align="center">Welcome to the most frikie web in the world</h2>
<div class="mainimg" align="center">
<img src="img/finn.png" width="40%" alt="Imagen Finn"/>
</div>
<p>In current usage, the word "freak" is commonly used to refer to a person with something unusual about their appearence or behaviour. This usage dates from the so-called freak scene of the 1960s and 1070s. "Freak" in this sense may be usedeither as a pejorative, a term of admiration, or a self-description[citation needed]. It can aslo denote a strong obsession with a particular activity,e.g., "He's such a neat-freak" or "You're a singing freak". The term "freaky" can also apply to a person who is sexually adventurous, or by itself as in "that person's a freak"(in bed). As an extension of this definition, within pornography, the word can refer to someone who is viewed as being a particularly extreme sex addict, or for whom sex is a central focus of their lives.</p>
<div class="mainimg" align="center">
<img src="img/Finn_and_jake.png" width="40%" alt="Imagen Finn y jake"/>
</div>
<p>In this web you can download games, talk with other freaks, download the most freak music and films etc...</p>
<p class="contact">If you have some problems with this web, please contact with [email protected] o [email protected]</p>
</div>
<!--Formulari Login-->
<div class="dreta">
<div class="form">
<h2 align="center">Frikie-zone users login</h2>
<div class="formimg" align="center">
<img src="img/Bmo.png" width="50%" alt="Imagen BMO"/>
</div>
<form action="#" method="post">
<p>Usuari: <input type="text" name="user"/>
Contrasenya:<input type="password" name="pwd"/>
<br/>
<input type="submit" value="entrar"/>
</p>
</form>
</div>
<!--Imatges dreta-->
<div class="divimagenes">
<div class="imagenesimg" align="center">
<img src="img/Princesa_chicle.png" width="50%" alt="Imagen Princesa chicle"/>
<img src="img/arcoiris.png" width="100%" alt="Imagen Arcoiris"/>
</div>
</div>
</div>
</div>
</body>
</html> 