I am encountering an issue with my HTML component that utilizes a booking engine. The parent width of the component is set, and the children elements inherit this width. There are three input fields and a search button within the component. The problem arises when viewing the component on different screen resolutions; either the search button drops to the next line or the additional search options overlap the button. The CSS code for styling the component is provided below:
.search-container{
height: 70px;
width: 846px;
position: absolute;
top:170px;
z-index: 1000;
margin: 0px 60px 0px 60px;
}
.outer-container{
width: 836px;
border-radius: 10px;
background-color: rgba(43, 51, 54, 0.91);
padding: 5px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(43, 51, 54, 0.91)', endColorstr='rgba(43, 51, 54, 0.91)',GradientType=0 ); /* IE6-8 */
}
... (CSS code continues)
The current workaround involves manually adjusting the margin applied to the button element. How can I ensure that this styling remains consistent across various screen resolutions without needing manual adjustments?