Question posted in 
I have come across a weird problem when trying to set the width for my search bar. Here’s part of my HTML code.
<header class="header-main">
<div class="header-main-logo">
<a href="index.php" class="logo">LOGO</a>
</div>
<div class="search-container">
<form method="get" action="search.php?page" class="search-form">
<input class="search-bar" type="search" name="query" value='<?php echo isset($_GET["query"]) ? trim($_GET["query"]) : "" ?>' placeholder="Search">
<div class="search-btn">
<input type="hidden" name="page" value="1">
<button type="submit" name="search" value="1">Search</button>
</div>
</form>
</div>
</header>
This is my CSS code
.header-main {
box-sizing: border-box;
width: 100%;
height: 60px;
background-color: rgb(107, 23, 23);
display: flex;
justify-content: space-between;
}
.search-container {
box-sizing: border-box;
width: 50%;
height: 100%;
background-color: rgb(51, 52, 59);
display: flex;
align-content: center;
}
.search-container .search-bar {
box-sizing: border-box;
border: 1px solid rgb(60, 255, 0);
height: 40px;
width: 100% !important;
cursor: text;
font-size: 14px;
font-weight: 600;
font-family: Arial, Helvetica, sans-serif;
color: rgb(0, 0, 0);
background-color: rgb(248, 248, 248);
align-self: center;
}
If I set the width in .search-container .search-bar to 100%, it does not take effect, but if I enter a value such as 400px, it works. I want it to be in percentage so that it is dynamic to the size of the page.
I thought it was simply setting the width to an HTML element. I want the Search to occupy the full width of its parent, that is, the search container.
4
Answers
It’s taking on 100% of the width of its direct parent, the form, which has no set width.
The issue is coming from your form it is not taking 100% of the width of your form thats why. Try applying width to you form as well (you may want to give it a class name instead)
When you specify a percentage as the value for width, then you essentially say that the given element will have its width being equal to some percentage of its parent, whatever it may have. Therefore the percentage of the grandparent will be inherited if and only if the parent inherits it. In the snippet below I have set the width of its parent so the grandchild will inherit it.
It takes 100% width from its parent. In this case, the form doesn’t have any width set that’s why it’s not taking effect.