Divs do not size themselves according to their percentage widths relative to their container-CodePudding

My expectation is that I have 4 divs side by side taking up the entire width of the page. But this is not happening. The divs are instead sizing themselves in accordance with the objects they contain, which is their default behavior. The divs do appear side by side though as intended.

<style>

body {
    width: 100%; /* full window width */
}
<!-- favicon styles -->
.basic{}
.xinfo {
  color: #6495ed; 
}
<!-- content in divs -->
.iwrapper{
  width:100%;
  min-width:100%;
  overflow:auto;
  display: inline-block;
}
.iInfo{
  width:"10%";
  min-width:"10%";
  position:relative;
  float:left;
}
.ibox{
  margin-left:"10%";
  width:"30%";
  position:relative;
  float:left;
  overflow:auto;
}
.iremove{
  margin-left:"40%";
  width:"10%";
  float:left;
}
.itip{
  margin-left:"50%";
  width:"50%";
  float:left;
  overflow:auto;
}
</style>

</head>
<body>

<form id="frmContent" width="100%">
<div id="iwrapper" >
<div id="iInfo" ><i  aria-hidden="true"></i></div>
<div id="ibox" ><input type="text" id="content1" name="content1"></div>
<div id="iremove" ><i  aria-hidden="true"></div>  
<div id = "itip" >Example: blah blah</div>
</div>
</form>
</body>

What am I doing wrong?

CodePudding user response：

Better try to use display: flex; for this problem for .iwrapper with justify-content: space-between; . Remove the margins from the child containers.

Here is a good overview how to use flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CodePudding user response：

4 divs side by side taking up the entire width of the page.

.container>div {
  border: 2px dashed black;
  text-align: center;
}

.container {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

<div >
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>