Css Tricks, SearchBar following horizontal 2 colors background

Question

I'm almost there with my CSS design, but I'm just facing a small problem with my implementation.

What I'm trying to do is this:

I want the search bar in between my two color background. The problem is when I increase / decrease my search bar is moving up or down but not following the line and I don't want this.

I was wondering if there is a was to cheat. For now I will try to do this : And then adding a second div at the bottom. It's the only solution I've found for now. But maybe if somebody has a better way with linear-gradient or something like that why not!

I leave a link here if you want to see : jsFiddle: https://jsfiddle.net/yo7pzfda/

Questions seeking debugging help must include the shortest code necessary to reproduce it **in the question itself.** NB - **Please don't abuse the code blocks to get around this requirement**. — Paulie_D, Feb 26 '19 at 16:52

cb64 · Accepted Answer · 2019-02-26T17:53:45.793

Try using a negative margin for your input box and putting it at the top of the content div. This will shift it up a few pixels into the above div and keep it there when you resize the screen.

snippet:

body {
  background-color: gray;
  margin: 0;
  padding: 0;
}

input {
  height: 30px;
  width: 300px;
  border-radius: 5px;
  margin-top: -5%;
}

#content {
  background-color: blue;
  padding: 0;
  margin: 0;
  margin-top: 7%;
  min-width: 100vh;
  min-height: 100vh;
  text-align: center;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

<div id="content">
  <input placeholder="Search...">
</div>

Css Tricks, SearchBar following horizontal 2 colors background

1 Answers1