CODEWITHSUNDEEP
javascriptjqueryhtmlcsswidth
nikagar4
nikagar4

Reputation: 840

CSS Styling fill space left in the left of the element and the right of the element

imagine an element, which is centered in its container, has its width, but don't know the exact width, something like text and i want the left space and right space to be same and colored, something like this:

----------------- Test This -----------------

#left {
  background-color: red;
}
#middle {
  width: 200px;
  /* it might be different */
}
#right {
  background-color: red;
}
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>

Upvotes: 0

Views: 64

Answers (5)

bhupesh
bhupesh

Reputation: 104

Surround your div by another div "container" , now you don't need left and right divs.. Your Text here, Div is surrounded by container div #container { background-color: red; }

    #middle {
        font-size: 30px;
        width: 80%;
        margin: auto;
        text-align: center;
        background-color: white;
    }


</style>

Upvotes: 0

Saurabh Ahuja
Saurabh Ahuja

Reputation: 473

    .container{
       display:flex;
    }
     .main-body{
       flex:1 1 auto;
    }
    #left{
        background-color: red;
   }
   #middle{
        width: 200px;
       text-align:center;
  }
    #right{
        background-color: red;
    }
  <div class="container">
    <div class="main-body" id="left"></div>
    <div id="middle">Hello</div>
    <div  class="main-body" id="right"></div>
  </div>

Upvotes: 1

Pugazh
Pugazh

Reputation: 9561

Can be achieved using display: flex

.wrapper {
  display: flex;
  text-align: center;
}
#left {
  flex: 1;
  background-color: red;
}
#middle {
  /* it might be different */
}
#right {
  flex: 1;
  background-color: red;
}
<div class="wrapper">
  <div id="left"></div>
  <div id="middle">Some text</div>
  <div id="right"></div>
</div>
<br/>
<div class="wrapper">
  <div id="left"></div>
  <div id="middle">Some long text can go here!</div>
  <div id="right"></div>
</div>

Upvotes: 1

Sivakumar
Sivakumar

Reputation: 347

Split into equal spaces using bootstrap and then fill color

<div class="container">
<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-4 fill-color"> h</div>
        <div class="col-md-4 col-sm-4 col-xs-4">h</div>
        <div class="col-md-4 col-sm-4 col-xs-4 fill-color">h</div>
    </div>
</div>


.fill-color {
   background: red;
}

Working fiddle

Upvotes: 0

rupanshu verma
rupanshu verma

Reputation: 9

you can add margin attribute to both left and right div of yours.Fix the width of left and right div.Try this , i guess it will sort out your problem

Upvotes: -1

Related Questions