I want my new div to match the height of the previous one. I'm using percentages for width and height to ensure it displays properly on mobile devices as well. I've tried setting the parent elements to 100% width and height based on suggestions from various forums, but that didn't work. I also attempted using display: table-cell, without success. Here's how my setup looks:
index.php:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"/>
<title>SiteTitle</title>
<link rel = "stylesheet" type = "text/css" href = "styles/index.css"/>
</head>
<body>
<div id = "allContent">
<div id = "header">
<div id = "siteLogo">
<h1 id = "title">Site_Title</h1>
</div>
<div id = "shortMenu">
<a href = "#">Login</a>
</div>
</div>
</div>
</body>
</html>
index.css:
body {
background-color: rgb(0, 0, 0);
margin: 0px;
padding: 0px;
color: rgb(192, 74, 0);
}
div#allContent {
width: 80%;
margin: auto;
}
div#allContent div#header {
margin: 0px;
padding: 0px;
}
div#allContent div#header div#siteLogo {
margin: 0px;
padding: 0px;
width: 70%;
border: 1px solid blue;
float: left;
}
div#allContent div#header div#siteLogo h1#title {
margin: 0px;
padding: 0px;
font-size: 300%;
font-family: Sans-Serif;
}
div#allContent div#header div#shortMenu {
width: 20%;
border: 1px solid green;
float: left;
}
div#allContent div#header div#shortMenu a {
font-family: Sans-Serif;
color: rgb(204, 204, 204);
text-decoration: none;
}
At this point, I'm not sure what else to try.
I basically want the bottom of the Login link to align with the bottom of the website title. In the future, I may switch it out for a logo image so the height could change. I want a solution that adapts automatically without manual adjustments each time. Currently, the Login link is at the top of the page.
EDIT: I included the following code snippet, which unfortunately resulted in each div having a width of 50%
div#allContent div#header {
margin: 0px;
padding: 0px;
display: flex;
}
div#allContent div#header div {
flex: 1;
}