CODEWITHSUNDEEP
htmlcss
MyNewName
MyNewName

Reputation: 1055

div container fill width

I have an div container namend "content". This container got a width of 500px;. Inside this div are two other divs. One div is called "right", with fixed width of 300px;. The other container ("left") should fill the rest width. Now I can give him a width of 200px, but when I resize the window the width does not change of the "left" container. I want that only the width of the second container "left" change, maybe with a % width?

enter image description here

And when I resize the window it should look like this:

enter image description here

Here is the code:

*{
  margin: 0px;
  padding: 0px;
}

.content{
  width: 500px;
  border: 1px solid black;
  padding: 5px;
}

.left{
  float: left;
  width: 300px;
  height: 20px;
  background-color: blue;
}

.right{
  float: right;
  width: 50%;
  height: 20px;
  background-color: red;
}

.clearBoth{
  clear: both;
}
<div class="content">
  <div class="left">
  
  </div>
  <div class="right">
  
  </div>
  <div class="clearBoth"></div>
</div>

JFiddle

Upvotes: 1

Views: 126

Answers (6)

Vineet Kapoor
Vineet Kapoor

Reputation: 8289

Following code will keep the width of right container fixed at 300px. Left container will occupy rest of the space with 10px margin on its right side.
Please note, total width of content container is 500px. 

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.content{
  border: 1px solid black;
  width: 500px;
  padding: 5px;
}

.left{
  float: left;
  width: calc(100% - 310px);
  height: 20px;
  margin-right: 10px;
  background-color: blue;
}

.right{
  float: right;
  margin: 0px;
  width: 300px;
  height: 20px;
  background-color: red;
}

.clearBoth{
  clear: both;
}

Upvotes: 0

Denis
Denis

Reputation: 2469

No need of calc
http://jsfiddle.net/7XD8s/303/

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.content{
  border: 1px solid black;
  padding: 5px;
}

.left{
  float: left;
  width: 300px;
  height: 20px;
  margin-right: 10px;
  background-color: blue;
}

.right{
  overflow: hidden;
  height: 20px;
  background-color: red;
}

.clearBoth{
  clear: both;
}

Upvotes: 0

Qwertiy
Qwertiy

Reputation: 21400

http://jsfiddle.net/7XD8s/300/

.left {
  float: left;
  width: 300px;
  height: 20px;
  background-color: blue;
}

.right {
  display: block;
  margin-left: 300px;
  height: 20px;
  background-color: red;
}

Upvotes: 0

Nutshell
Nutshell

Reputation: 8537

You want something like this ? You have to resize the window to see the change.

I use calc() function in CSS : 

.right{
  float: left;
  width: calc(100% - 310px);
  height: 20px;
  margin-left: 10px;
  background-color: red;
}

I also use a fluid width for the main container.

See this fiddle

Upvotes: 0

Ajay Malhotra
Ajay Malhotra

Reputation: 838

I think, this will be the best answer for you. please check the given below code snippet.

*{
  margin: 0px;
  padding: 0px;
}

.content{
  width: 100%;
  
}

.left{
  float: left;
  width: 300px;
  height: 100px;
  background-color: blue;
}

.right{
  float: right;
  width: calc(100% - 300px);width: -webkit-calc(100% - 300px);width: -moz-calc(100% - 300px);
  height: 100px;
  background-color: red;
}

.clearBoth{
  clear: both;
}
<div class="content">
  <div class="left">
  
  </div>
  <div class="right">
  
  </div>
  <div class="clearBoth"></div>
</div>

Upvotes: 0

Saman Babanejad
Saman Babanejad

Reputation: 29

You should Change Left Width size To 60% 

.left{float: left;width: 60%;height: 20px;background-color: blue;}

.right{float: right; width: 40%;height: 20px; background-color: red;}

Upvotes: 2

Related Questions