I have
<!DOCTYPE html>
<html>
<head>
<title> Friends </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
background-image: url(images/RegisterAndLoginBackground.jpg);
}
body {
margin: 0px;
}
h1 {
margin-top: 3%;
margin-bottom: 4%;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #03cafc;
}
#Home, #AddFriends {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
li a:hover {
background-color: #058db0;
}
#AddFriend, #RequestsOne, #RequestsTwo {
text-align: center;
padding: 10px;
width: 14%;
height: 30%;
margin-top: 15px;
margin-bottom: 15px;
margin-right: auto;
margin-left: auto;
background-color: #03cafc;
}
input {
width: 60%;
height: 15%;
}
#AddFriendButton {
margin-top: 6%;
border-style: solid;
background-color: #8ae7ff;
border-color: #004354;
width: 50%;
height: 100%;
font-size: 20px;
}
</style>
</head>
<body>
<main>
<div id = "NavBar">
<ul id>
<li id = "Home"> <a href = "LoggedIn.html"> Home </a> </li>
<li id = "AddFriends"> <a href = "Friends.html"> Friends </a> </li>
</ul>
</div>
<div id = "AddFriend">
<h1> Add Friend </h1>
<label for = "Username"> Username: </label>
<input type = "text" id = "Username">
<button id = "AddFriendButton"> Add Friend </button>
</div>
<div id = "RequestsOne">
<h1> Requests Received </h1>
<ul id = "RequestsReceived">
</ul>
</div>
<div id = "RequestsTwo">
<h1> Requests Sent </h1>
<ul id = "RequestsSent">
</ul>
</div>
</main> //Some more code
My problem is that AddFriendButton height does not work. I know the parent height has to be defined, which I believe I did. On another page, it worked. I'm not really sure, this is my first time making a large website. I know it will work if I use pixels instead. It will also get larger if I change the font size, but why won't height percentage work?
