Home > Software design >  Items inside a div occupying the space automatically when resizing browser. CSS HTML
Items inside a div occupying the space automatically when resizing browser. CSS HTML

Time：05-02

Want these select tags and a button inside a div to automatically occupy the white space whatever size of the screen or browsers.

These is the result when I use a large screen and give white space: Image1

And I want to look like this no matter what size of the browser or screen is:Image2

Just need a bit of help...

Codes:

*{
    padding:0px;
    box-sizing: border-box;
    margin: 0;
    font-family: serif;
  }

.filter{
    display: grid;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3em;
    white-space: normal;
    padding: 1em;
    overflow: hidden;

}

.filter-by{
    display: flex;
    position: absolute;
    left:1em;
}

.colour-option{
    display: flex;
    position: absolute;
    left:15em;
}
.recipient-option{
    display: flex;
    position: absolute;
    left:30em;
    width: 7.5%;

}

.occasion-option{
    display: flex;
    position: absolute;
    left:46em;
    width: 7.5%;

}

.price-option{
    display: flex;
    position: absolute;
    left:65em;
    width: 7%;

}

.clear-button{
    display: inline-block;
    position: absolute;
    left:93em;
    border-radius: 10px;
    border-top-left-radius : 30px 25px;
    border-bottom-left-radius : 30px 25px;
    width: 6em;
    height:2em;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    box-shadow :-1px -1px 0px rgba(0,0,0,0.2)inset,
        0 1px 2px rgba(0,0,0,0.8)inset;
}

select{
        /* Select Reset */
    border: 1px solid;
    background: transparent;
    cursor: pointer;
    /* custom select appearance */  
    padding: 5px 5px 5px 5px;
    font-size: 14px;
    display:inline-block;
    width: 100%;
  }

}

@media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px) {
    /* ... */
    select {
        width: 150px;
    }
}
<div >
        <lable class ="filter-by"><b>Filter by:</b></lable> 
        <form >
            <select id ="colour">
            <option value = "0" selected="selected" style="text-align: center; font-weight: bolder"><strong>Colour:</strong></option>
            <option value = "1"style="text-align: right;"> Red </option>
            <option value = "2" style="text-align: right;">Yellow</option>
            <option value = "3" style="text-align: right;">Orange</option>
            <option value = "4" style="text-align: right;">Green</option>
            <option value = "5" style="text-align: right;">Pink</option>
            <option value = "6" style="text-align: right;"> Purple </option>
            <option value = "7" style="text-align: right;">White</option>
            <option value = "8" style="text-align: right;">Dark</option>
            </select>
            </form>   

            <form >
                <select id ="recipient">
                <option value = "0" selected="selected" style="text-align: center; font-weight: bolder"><strong>Recipient:</strong></option>
                <option value = "1"style="text-align: right;"> Baby </option>
                <option value = "2" style="text-align: right;">For Her</option>
                <option value = "3" style="text-align: right;">For Him</option>
                <option value = "4" style="text-align: right;">For Family</option>
                <option value = "5" style="text-align: right;">Corporate Flowers</option>
                </select>
                </form> 
                
                <form >
                    <select id ="occasion">
                    <option value = "0" selected="selected" style="text-align: center; font-weight: bolder"><strong>Ocassion:</strong></option>
                    <option value = "1"style="text-align: right;"> Birthday</option>
                    <option value = "2" style="text-align: right;">Mothers Day</option>
                    <option value = "3" style="text-align: right;">Easter</option>
                    <option value = "4" style="text-align: right;">Thank you</option>
                    <option value = "5" style="text-align: right;">Romantic</option>
                    <option value = "6"style="text-align: right;"> Get Well</option>
                    <option value = "7" style="text-align: right;">Congratulations</option>
                    <option value = "8" style="text-align: right;">Valentines</option>
                    <option value = "9" style="text-align: right;">Christmas</option>
                    <option value = "10" style="text-align: right;">Wedding</option>
                    <option value = "10" style="text-align: right;">Farewell</option>
                    </select>
                    </form>  

                    <form >
                        <select id ="price">
                        <option value = "0" selected="selected" style="text-align: center; font-weight: bolder"><strong>Price:</strong></option>
                        <option value = "1"style="text-align: right;"> 5 NZD - 20 NZD </option>
                        <option value = "2" style="text-align: right;"> 20 NZD - 80 NZD </option>
                        <option value = "3" style="text-align: right;"> 90 NZD - 150 NZD </option>
                        <option value = "4" style="text-align: right;"> 160 NZD - 500 NZD   </option>
                        </select>
                        </form> 
                        
                <button class = "clear-button"> Clear all </button>
    </div>

CodePudding user response：

Try to change your css with this one.

*{
    padding:0px;
    box-sizing: border-box;
    margin: 0;
    font-family: serif;
  }

.filter{
    display: flex;
    align-content: center;
    justify-content: space-between;
    width: 100%;
    height: 3em;
    white-space: normal;
    padding: 1em;
    overflow: hidden;

}

.filter-by{
    left:1em;
}

.colour-option{
    left:15em;
}
.recipient-option{
    left:30em;
    width: 7.5%;

}

.occasion-option{
    left:46em;
    width: 7.5%;

}

.price-option{
    left:65em;
    width: 7%;

}

.clear-button{
    left:93em;
    border-radius: 10px;
    border-top-left-radius : 30px 25px;
    border-bottom-left-radius : 30px 25px;
    width: 6em;
    height:2em;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    box-shadow :-1px -1px 0px rgba(0,0,0,0.2)inset,
        0 1px 2px rgba(0,0,0,0.8)inset;
}

select{
        /* Select Reset */
    border: 1px solid;
    background: transparent;
    cursor: pointer;
    /* custom select appearance */  
    padding: 5px 5px 5px 5px;
    font-size: 14px;
    display:inline-block;
    width: 100%;
  }

}

@media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px) {
    /* ... */
    select {
        width: 150px;
    }
}

CodePudding user response：

You were messing up with the grid container. The children contents should not have position absolute if you gave the container display: grid; or display: flex;.

In my example I chose to opt with a flex container instead, and changed the children as display: block; flex: 1. They will show up in line and centered having a 1em margin-right.

*{
    padding:0px;
    box-sizing: border-box;
    margin: 0;
    font-family: serif;
  }

/*flex container*/
.filter{
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 100%;
  height: 3em;
  white-space: normal;
  padding: 1em;
  overflow: hidden;
}

/*flex content*/
.filter-by{
    display: block;    
    flex: 1;
    margin-right: 1em;
}

/*flex content*/
.colour-option{
    display: block;      
    flex: 1;
    margin-right: 1em;
}

/*flex content*/
.recipient-option{
    display: block;    
    flex: 1;
    margin-right: 1em;
}

/*flex content*/
.occasion-option{
    display: block;        
    flex: 1;
    margin-right: 1em;
}

/*flex content*/
.price-option{
    display: block;
    flex: 1;
    margin-right: 1em;
}

.clear-button{
    display: block;
    border-radius: 10px;
    border-top-left-radius : 30px 25px;
    border-bottom-left-radius : 30px 25px;
    width: 6em;
    height:2em;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    box-shadow :-1px -1px 0px rgba(0,0,0,0.2)inset,
        0 1px 2px rgba(0,0,0,0.8)inset;
}

select{
        /* Select Reset */
    border: 1px solid;
    background: transparent;
    cursor: pointer;
    /* custom select appearance */  
    padding: 5px 5px 5px 5px;
    font-size: 14px;
    display:inline-block;
    width: 100%;
  }

}

@media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px) {
    /* ... */
    select {
        width: 150px;
    }
}
<div >
  
  <label class ="filter-by"><b>Filter by:</b></label> 
  
  <form >
    <select id ="colour">
      <option
        value = "0"
        selected="selected"
        style="text-align: center; font-weight: bolder">
          <strong>Colour:</strong>
      </option>
      <option value = "1"style="text-align: right;"> Red </option>
      <option value = "2" style="text-align: right;">Yellow</option>
      <option value = "3" style="text-align: right;">Orange</option>
      <option value = "4" style="text-align: right;">Green</option>
      <option value = "5" style="text-align: right;">Pink</option>
      <option value = "6" style="text-align: right;"> Purple </option>
      <option value = "7" style="text-align: right;">White</option>
      <option value = "8" style="text-align: right;">Dark</option>
    </select>
  </form>   

  <form >
    <select id ="recipient">
      <option
        value = "0"
        selected="selected"
        style="text-align: center; font-weight: bolder">
          <strong>Recipient:</strong>
      </option>
      <option value = "1"style="text-align: right;"> Baby </option>
      <option value = "2" style="text-align: right;">For Her</option>
      <option value = "3" style="text-align: right;">For Him</option>
      <option value = "4" style="text-align: right;">For Family</option>
      <option value = "5" style="text-align: right;">Corporate Flowers</option>
    </select>
  </form> 

  <form >
    <select id ="occasion">
      <option
        value = "0"
        selected="selected"
        style="text-align: center; font-weight: bolder">
          <strong>Ocassion:</strong>
      </option>
      <option value = "1"style="text-align: right;"> Birthday</option>
      <option value = "2" style="text-align: right;">Mothers Day</option>
      <option value = "3" style="text-align: right;">Easter</option>
      <option value = "4" style="text-align: right;">Thank you</option>
      <option value = "5" style="text-align: right;">Romantic</option>
      <option value = "6"style="text-align: right;"> Get Well</option>
      <option value = "7" style="text-align: right;">Congratulations</option>
      <option value = "8" style="text-align: right;">Valentines</option>
      <option value = "9" style="text-align: right;">Christmas</option>
      <option value = "10" style="text-align: right;">Wedding</option>
      <option value = "10" style="text-align: right;">Farewell</option>
    </select>
  </form>  

  <form >
    <select id ="price">
      <option
        value = "0"
        selected="selected"
        style="text-align: center; font-weight: bolder">
          <strong>Price:</strong>
      </option>
      <option value = "1"style="text-align: right;"> 5 NZD - 20 NZD </option>
      <option value = "2" style="text-align: right;"> 20 NZD - 80 NZD </option>
      <option value = "3" style="text-align: right;"> 90 NZD - 150 NZD </option>
      <option value = "4" style="text-align: right;"> 160 NZD - 500 NZD   </option>
    </select>
  </form> 

  <button class = "clear-button"> Clear all </button>
  
</div>

Page link：https//www.codepudding.com/Softwaredesign/392643.html

Prev:How can I align the last element of a flexbox to the right with taking into account space-around?
Next:How Do I go back to my html page without losing the index of it?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding