Hi. I’m writing some html and css code to create a webpage. My problem is when I resize the webpage the location of some elements get disorganized. Example is in the below picture:
And my complete code is here in this link:
https://codepen.io/elenora/pen/OJJJrXr
That’s caused by the use of absolute positioning, also the mix of percentage and pixel coordinates I think would play a roll.
I’ve not investigated your css to fix it, I think you would better first reorganize the html.
Could you describe in detail or show how it is meant to work so we can suggest a working solution? I.e without relying on AP. 
In my code there are two searchbars like in the below picture. And I want when I click in the left search bar that has a label “find” then a list of items be shown exactly under it.
Here is what exactly I want to show that you can find the complete code in the
https://codepen.io/elenora/pen/OJJJrXr
And Another thing I want is, How can I make my list of items with the id “divlist” to have the same width as the search bar’s width?
I’m about to leave the keyboard in a moment, so I’ll give a quick fix to do away with the AP. 
1 – move the “divlist” out from the form to come after in code.
2 – remove all AP.
3 – give the “divlist” a display table and margin auto:
#divlist{
/*
position: absolute;
z-index: 1;
top:37px;
left:11.4%;
*/
display: table; /* add */
margin:auto; /* add */
border-radius: 4px;
border-color:green;
border-style: double;
min-width:252px;
height:auto;
}
Try this and maybe loose the min-height on the form or try other html orders to see if you can get it to work the way you want.
I obviously didn’t get what you were trying to achive, but I’m out now. Sorry. 
Thanks Erik. My problem is when I minimize the web page, the search bars that were located horizontally near each other get disorganized, I mean after minimizing the screen they locate vertically on top of each other like you can see in the first picture I attached. I need both of them to be still horizontally in the same location like before changing the size of screen. I don’t know how can I fix this?
And my other problem is how can I specify the width of “divlist” which is a div containing some items to have the same width as the search bar?
And my last question is, what do you mean by AP?
AP is short for Absolute Positioning.
I’m assuming you want the drop down portion to be absolutely placed so that it sits over any content below? You don’t need to absolutely place the search bar itself and I already gave you code to centre horizontally and vertically with flex. Instead you have used absolute positioning which takes it out of the flow and you have placed off centre which looks very odd indeed. Let flex centre vertically and horizontally with ease and maintain the flow of the document.
If you want the menu as wide as the whole search bar then set its left position to zero and its right position to zero and it will take up the whole space of its relatively placed parent. You may need to offset it by 10px to account for padding outside the search bar. (If you only wanted the menu as wide as the 'search our website" input only then you would need a revised html source to do this easily and automatically. Once you start throwing magic number fixes at something then you know that you are doing something wrong)
When you go to smaller screen the inputs drop to a vertical line for more room which means that you have to adjust the top position of the dropdown portion in your media query accordingly. Unfortunately because of the way this is constructed you can’t have an automatic top position so you will need a bit of magic number fix to account for the input and label height.
Here’s a quick fork of your codepen.
Please stop using html comments in the css file as that will break things. Usee CSS comments /* css comment */
May I suggest you look into the html “datalist” for the input instead of the div and the Javascript.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
https://caniuse.com/datalist
Stand alone example from your Codepen:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<title>Untitled</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body{
overflow-y: scroll;
}
.tfnewsearch {
display:flex;
margin:0;
padding: 10px 0;
min-height:60vh;
background-color: #c3dfef;
font-size: 1.4rem;
font-family: Arial, Helvetica, sans-serif;
}
.tfnewsearch * {
font-size: inherit;
}
#master{
position:relative;
z-index: 0;
width:100%;
/* min-height:20vh; */
}
#divlist{
position: absolute;
z-index: 1;
top:37px;
left:11.4%;
display: table;
margin:auto;
border-radius: 4px;
border-color:green;
border-style: double;
min-width:252px;
height:auto;
}
.tfheader {
position:absolute;
z-index: 1;
top: 45%;
left: 20%;
display: flex;
border-radius: 4px;
margin: auto;
padding: 0 10px;
max-width: 1180px;
}
.tftext {
margin: 0;
padding: 5px 10px;
border: 1px solid #0076a3;
border-left-style: none;
border-right-style: none;
color: #666;
}
.tftext {
flex: 1 0 0%;
}
.tfbutton2 {
margin: 0;
border: 1px solid grey;
border-left: none; /* Prevent double borders */
border-radius: 0 5px 5px 0;
padding: 5px 0;
min-width: 50px;
background: #2196f3;
color: white;
cursor: pointer;
}
.mylabel {
display: flex;
border: 1px solid #0076a3;
padding: 0 20px 0 10px;
background: #fff;
align-items: center;
}
.mylabel:first-child {
border-radius: 5px 0 0 5px;
}
.tfbutton2:hover {
background: #007ead;
background: linear-gradient(#0095cc, #00678e);
}
@media screen and (max-width: 700px) {
.tfheader {
flex-wrap: wrap;
}
.tfheader > * {
border-radius: 0;
flex: 1 0 100%;
}
.tfheader .mylabel {
margin: 0 0 3px;
border: none;
background: transparent;
}
.tftext {
margin: 0 0 10px;
border: 1px solid #0076a3;
}
.tfbutton2 {
margin: 10px auto;
border-radius: 5px;
padding: 10px;
max-width: 100px;
}
}
</style>
</head><body>
<div id="master">
<form id="tfnewsearch" class="tfnewsearch" method="get" action="http://www.google.com">
<div class="tfheader">
<label class="mylabel" for="searchinput">Find</label>
<input type="search" list="myUL" id="searchinput" class="tftext tftextinput1" name="q" onkeyup="myFunction()" maxlength="120" placeholder="Search our website">
<datalist id="myUL">
<option value="Adela">
<option value="Agnes">
<option value="Billy">
<option value="Bob">
<option value="Calvin">
<option value="Christina">
<option value="Cindy">
</datalist>
<label class="mylabel" for="cityinput">Near</label>
<input type="search" id="cityinput" class="tftext tftextinput2" name="q" maxlength="120" placeholder="city">
<button type="submit" class="tfbutton2"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
</body></html>
If I understand correctly what you are trying to achive
Thank you so much for your help Erik. I didn’t use datalist because it has got very simple style. That’s why I prefered to use some code with javascript.
Thank you so much for your help. You exactly understood what I want just I wanted the menu as wide as search our website input . I positioned my divlist absolutely and its ok for it to sits over any content below.
If you want the drop down only as wide as that single input then the html will need to be revised so that only the input and the drop down live in the same container.
I’ll put up an example but it won’t be until this evening now as out all day.
Here’s the example I promised.
If a datalist is used instead, I think it can be absolute positioned referring to the input. 
@PaulOB, you delivered already.
You are so right. And content wise it can’t be styled at all.
Not even responds to browser zoom it seems.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.