CSS Width property when entered in percentage is not taking effect

February 5, 2024

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.

>Solution :

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)

.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;
}
form{width: 100% !important;}
.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;
}

<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='11111' 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>