Need help with HTML/CSS formatting.
The webpage size is set to 1000 pixels by 1000 pixels and enclosed within a box. To aid alignment, I've added a temporary solid black border around the elements that will be hidden later on. The layout consists of an image at the top left (#Logo), followed by a div box (#Upper_Left) positioned next to the logo.
I am looking to utilize absolute positioning to align content with the top or bottom edge of the #Upper_Left div. Specifically, I want the h1 title to be at the top of the box and some text ["Search:____________[drop][drop]" - as a placeholder for a search bar] at the bottom-left corner of the div box. However, in my code, the "Search:____________[drop][drop]" text appears at the bottom left of the browser window instead of inside the #Upper_Left div.
How can I ensure the text is positioned relative to the div box?
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0px;
padding: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
border-style: solid;
border-color: black;
border-width: 1px;
}
#Entire_Page {
max-width: 1000px;
max-height: 1000px;
min-width: 1000px;
min-height: 1000px;
}
#Logo {
float: left;
width:104px;
height:118px;
}
#Upper_Left {
display: inline;
float: left;
max-width: 500px;
max-height: 118px;
min-width: 500px;
min-height: 118px;
}
#Title {
display: inline;
font-size: 3em;
}
#bottom_left {
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="Entire_Page">
<img id="Logo" src="logo.png" alt="logo">
<div id="Upper_Left">
<h1 id="Title">Title (Up Top)</h1>
<div id="bottom_left">
Search:____________[drop][drop]
</div>
</div>
</div>
</body>
</html>