Keep responsive divs side by side when one div contains a fixed size background image
Question
Needing to have 2 divs side by side I have one div with a background image of 62px and the other div needs to take up the remaining container divs width.
Search-box1 will be the div that expands to fill the remainder of container search which will be at different sizes depending on what size screen its viewed on.
So i need the search-button1's size to stay at 62px width while search-box1 fills the remainder when containersearch stretches to fill responsively.
<div class = "containersearch">
<div class="search-box1"></div><div class="search-button1"></div></div>
.search-box1{
background: #ffffff;
border: 1px solid #000000;
width:99%;
height:30px;
padding:5px 5px 5px 5px;
display: inline-block;
}
.search-button1{
background-image: url('search-button.png');
width:62px;
height:20px;
display: inline-block;
}
.containersearch
{border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width: 100%;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
2 answers
solution1
1 2016-09-14 09:56:03
You can try to use CSS calc() Function, something like
width: calc(100% - 62px);
solution2
1 2016-09-14 13:16:34
https://jsfiddle.net/ns2352gt/
Maybe your looking something like this..
body{ margin:0; } .containersearch { border: 1px solid #006699; background:#0A3D5D; padding:5px 5px 5px 5px; width:100% border-bottom-left-radius:8px; border-bottom-right-radius:8px; } input[type=text] { position:relative; width: 100%; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-image: url('http://findicons.com/files/icons/2226/matte_basic/32/search.png'); background-repeat: no-repeat; background-position: right; background-color: white; padding: 12px 20px 12px 10px; } input[type=text]:focus { width: 100%; }
<body> <div class = "containersearch"> <form> <input type="text" name="search" placeholder="Search.."/> </form> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.