<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Starter</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"> <!-- montserrat font from google fonts.-->
<style>
body{
font-family: montserrat;
}
#search-container{
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh; /* align center with min height 90 viewport height*/
}
#search-box{
border-style: solid;
border-radius: 4px;
height: 30px;
font-weight: 450;
font-size: 16px;
}
#get-history{
display: grid;
border: 1px solid rgb(0,0,0,0.1);
position: absolute;
}
@media (prefers-color-scheme: dark){
body{
background-color: #2b2a33;
}
#search-box{
background-color: #42414d;
color: white;
border-color: rgb(255,0,0,0.8);
}
}
@media (prefers-color-scheme: light){
#search-box{
color: #42414d;
}
}
@media (min-width:320px) { /* phone*/
#search-box{
flex: 0.80;
height: 45px;
}
}
@media (min-width:481px) { /* portait tablet*/
}
@media (min-width:641px) { /* big phones, e readers, ipad */
}
@media (min-width:961px) { /*small laptop, landscape ipad*/
}
@media (min-width:1025px) { /* big tablets, laptops*/
}
@media (min-width:1281px) { /* desktops*/
#search-box{
flex: 0.60;
height: 52px;
}
}
</style>
</head>
<body >
<div id="search-container">
<input id="search-box" type="text" placeholder="search anything.">
</div>
<div id="get-history">
<div>exa</div>
</div>
<script src="index.js">
</script>
</body>
</html>
I need to position the grid container with ‘get-history’ id to under to the search container. I need to result like the picture in below:The result that i want
I just tried with margin, but it will not work because I add min-height property to search container. So, the abstract size of the container will be too big, and the grid container will not be able to get on top and will get stuck. (I add the min-height property because I need to center the search container to the screen.) I tried to use top left properties, but I cannot make it responsive.
2
Answers
To position the grid container with the ID
get-historyunder the search container, you can use the following CSS:This will position the grid container at the absolute bottom of the page, with its left and right edges aligned with the left and right edges of the page. The
grid-template-columnsandgrid-template-rowsproperties define the grid container’s grid layout, but in this case, they are not strictly necessary, since the grid container will only have one child element.Here is a complete example of your HTML and CSS, with the above changes:
Try this. I removed the get-history id’s position, you had it as absolute, which because of the display flex with everything centered caused it to overlap and be on top of the input. I also changed the flex-direction to column, which makes all elements be stacked from top to bottom.