CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Martin AJ
Martin AJ

Reputation: 6707

How can I set the rest of width to an element?

Here is my code:

.rightbar, .container, .leftbar{
  display: inline-block;
  border: 1px solid;
  text-align: center;
}

.rightbar, .leftbar{
  width: 20%;
}

@media (max-width: 599px) {	
    .hidden-mob{
        display: none !important; 
    }
		
}
<div class="leftbar">leftbar</div>
<div class="container">container</div>
<div class="rightbar hidden-mob">rightbar</div>

I want to set the rest of width to the .container element. I can set width: 60%; to it. But I don't want that. Because in a small screen size, .rightbar element will be hidden and the width of .container should be 80% automatically.

Anyway, is there any idea how can I handle that?

Upvotes: 0

Views: 72

Answers (4)

Ujjaval Srivastav
Ujjaval Srivastav

Reputation: 1

body{
display: flex;
    display: -webkit-flex;
 
}
.rightbar, .container, .leftbar{
  display: block;
  border: 1px solid;
  text-align: center;
}

.rightbar, .leftbar{
  width: 20%;
}
.container{
width:100%;
}

@media (max-width: 599px) {	
    .hidden-mob{
        display: none !important; 
    }
		
}
 <div class="leftbar">leftbar</div>
<div class="container">container</div>
<div class="rightbar hidden-mob">rightbar</div>

It will work for responsive as well

Upvotes: 0

sol
sol

Reputation: 22969

Option 1 Add a media query for the container:

.rightbar,
.container,
.leftbar {
  display: inline-block;
  border: 1px solid;
  text-align: center;
}

.rightbar,
.leftbar {
  width: 20%;
}

.container {
  width: 55%;
}

@media (max-width: 599px) {
  .hidden-mob {
    display: none !important;
  }
  .container {
    width: 75%;
  }
}
<div class="leftbar">leftbar</div>
<div class="container">container</div>
<div class="rightbar hidden-mob">rightbar</div>

Option 2 Wrap the elements in a container, and play around with flexbox:

.wrapper {
  display: flex;
}

.rightbar,
.container,
.leftbar {
  border: 1px solid;
  text-align: center;
}

.rightbar,
.leftbar {
  width: 20%;
}

.container {
  width: 100%;
}

@media (max-width: 599px) {
  .hidden-mob {
    display: none !important;
  }
}
<div class="wrapper">
  <div class="leftbar">leftbar</div>
  <div class="container">container</div>
  <div class="rightbar hidden-mob">rightbar</div>
</div>

Upvotes: 0

Renzo Calla
Renzo Calla

Reputation: 7706

YOu can use set container to 100% and rest the equivalent of right and left div like the example

.rightbar, .container, .leftbar{
  display: inline-block;
  border: 1px solid;
  text-align: center;
}

.rightbar, .leftbar{
  width: 100px;
}
.container{
  
      width: calc(100% + -206px);
}

@media (max-width: 599px) {	
.hidden-mob{
		 display: none !important; 
	}
		
}
<div class="leftbar">leftbar
</div><div class="container">container
</div><div class="rightbar">rightbar</div>

Upvotes: 0

J. Titus
J. Titus

Reputation: 9690

Add .container to your media query (additionally, you'll need to use slightly smaller percentages due to the border on your elements):

.rightbar,
.container,
.leftbar {
  display: inline-block;
  border: 1px solid;
  text-align: center;
}

.container {
  width: 59%;
}

.rightbar,
.leftbar {
  width: 19%;
}

@media (max-width: 599px) {
  .hidden-mob {
    display: none !important;
  }
  .container {
    width: 78%;
  }
}
<div class="leftbar">leftbar</div>
<div class="container">container</div>
<div class="rightbar hidden-mob">rightbar</div>

Upvotes: 2

Related Questions