NoOorZ24 NoOorZ24 -4 years ago 110
CSS Question

Two div elements in one line but one is transparent

I want to have gray div with width: (100% - 330px).
It would be easy using 2 div elements if both had bg-color, but I need one with fixed size to be transparent.
I know I can solve this problem with calc(), but I'd prefer to avoid it.



#transp {
width:330px;
float:right;
height: 18px;
}

#grayline {
background-color: #444;
height: 18px;
width: 100%;
}

#grayline2 {
background-color: #444;
height: 18px;
width: calc(100% - 330px);
}

<div>
<!--This how it looks-->
<div id="transp"></div>
<div id="grayline"></div>
</div>
<br />
<div>
<!--This how it should look-->
<div id="grayline2"></div>
</div>




Answer Source

Remove the width from .grayline and add a right margin of 330px:

#transp {
  width:330px;
  float:right;
  height: 18px;
}

#grayline {
  background-color: #444;
  height: 18px;
  margin-right: 330px;
}

#grayline2 {
  background-color: #444;
  height: 18px;
  width: calc(100% - 330px); 
}
<div>
   <!--This how it looks-->
   <div id="transp"></div>
   <div id="grayline"></div>                
</div>
<br />
<div>
   <!--This how it should look-->
   <div id="grayline2"></div>                
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download