Ok so I'm trying to program a bar that appears at the top of the webpage. On that bar I want there to be a title, a button, and an input/search bar. My problem is that the input keeps overlapping the button in the top bar. Please note that the bar at the top is a div. Here is the link to the page with the bug: Link to the page.
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Langmesh</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div id="topbardiv">
<h1 id="titletext">Langmesh</h1>
<button onclick="browse()" id="browsebutton">Browse</button>
<input type="text" id="searchbar" value="Search">
</div>
</body>
</html>
Here is the CSS code:
#titletext {
font-size: 50px;
font-family: "Brush Script MT", sans-serif;
}
#topbardiv {
background-color: darkorange;
text-align: center;
border: 10px solid lightgray;
}
#topbardiv h1,
#topbardiv button {
margin: 0px;
display: inline-block;
padding: 1em;
color: white;
-webkit-text-stroke: 1.5px #000000;
}
#browsebutton,
#searchbar {
height: 150px;
width: 100px;
font-size: 30px;
font-family: "Brush Script MT", sans-serif;
background-color: darkorange;
border: 0;
}
I have not added any Javascript yet.
If this is a stupid question with a simple answer and I'm just dumb, feel free to criticize me.
I tried using text a button and an input in the same div and used css to put them all right next to eachother and I expected that it would look like a bar at the top with a title a browse button and a search bar but instead the search bar and the browse button ended up overlapping.
I am using a Windows 10 OS and replit to program the page and a chrome web browser.
it's because you have set the width of the #browsebutton and #searchbar elements. Please unset it and it will work.