user6573193 user6573193 - 1 month ago 7
CSS Question

Header with logo, searchform and button breaks responsive design

I have coded a header on my website, that includes a logo on the left side and a searchform with a search-button right next to it. The desktop-view is pretty nice, but on mobile devices (responsive design) it does not work. The goal is, that the logo, searchbar and searchbutton always uses the 100% width of the header on mobile.

The red box should be the logo, next to it the search bar and the search-button. I think I have big problems to handle the percent-widths on responsive, that the logo is e.x. 20% width and the search-container 80% with a 70% searchbar and a 30% searchbutton.

enter image descriptifewon here

The problem is, that whatever I do in CSS, on mobile the searchbar breaks... the searchbutton breaks under the searchbar. I have totaly no idea, where the problem is and I hope, somebody could give me a tip, how to code something like that. Positioning a container on the left and a container on the right is no problem for me, but in this special scenario, I need to positioning a container on the left and a container on the right, that consists of two elements... and only work with percent-values for width.

Thank you!

Answer

Without seeing any HTML or CSS, a simple solution is this:

https://jsfiddle.net/g1hgu0nh/

<div class="container">
  <div class="logo">logo</div>
  <div class="search">Search</div>
  <div class="search_button">Submit</div>
</div>

div {
    float: left;
}

.container {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.logo {
    width: 20%;
    background: red;
    padding: 10px 5px;
    margin: 0 1%;
}

.search {
    width: 45%;
    background: #333;
    padding: 10px 5px;
    margin: 0 1%;
}

.search_button {
    width: 20%;
    background: green;
    padding: 10px 5px;
    margin: 0 1%;
}