CODEWITHSUNDEEP
htmlcss
NoOorZ24
NoOorZ24

Reputation: 3277

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>

Upvotes: 0

Views: 66

Answers (3)

gyre
gyre

Reputation: 16777

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>

Upvotes: 1

Tariq Javed
Tariq Javed

Reputation: 481

Without calc() wrapper class div 

<div>
      <div class="wrapper">

        <div class="trans-wrapper">
          <div id="transp"></div>
        </div>
        <div id="grayline"></div>
      </div>



    </div>

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

.wrapper {
  display: table;
  position: relative;
  width: 100%
}

.trans-wrapper {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
}

#transp {
  width: 330px;
  height: 18px;
  white-space: nowrap;
  background:red;
}

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

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

Fiddler link https://jsfiddle.net/prnrjdt5/

Upvotes: 0

Lucian
Lucian

Reputation: 1713

you can use margin-right: 330px for .grayline

no need to use 2 divs

#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="grayline"></div>
</div>
<br />
<div>
  <!--This how it should look-->
  <div id="grayline2"></div>
</div>

Upvotes: 0

Related Questions