CODEWITHSUNDEEP
htmlcss
Kosem
Kosem

Reputation: 373

Making div take the "free space" on the right?

In the following code, I'm trying to make the Orange div (class="Inner3") fit into the top right part of the container div (since there is a free space). Tried it using float and played with display:inline-block but it didn't work. Can anyone show me how to do it?

Thank you.

.OuterDiv {
  width: 1000px;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: #E3EAD7;
  height: 1000px;
}
.Inner1 {
  width: 600px;
  background-color: #6D97C0;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner2 {
  width: 600px;
  background-color: #ECB7D8;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner3 {
  width: 300px;
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 300px;
  float: left;
}
<div class="OuterDiv">
  <div class="Inner1"></div>
  <div class="Inner2"></div>
  <div class="Inner3"></div>
</div>

Upvotes: 3

Views: 477

Answers (3)

Saurabh Bayani
Saurabh Bayani

Reputation: 3520

Ok So what is happening in your case: You have set all three div as float:left (Which will align them next to each other in single row) and you have put fixed width to their parent(which is not enough for their combined width), That's why two divs came on next line and still attached to each other.

Why don't you remove float: left from Inner3 or remove width from parent

Upvotes: 0

Usman
Usman

Reputation: 163

Remove the width and float properties from .Inner3 class styles and it will work.

.Inner3 {
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 300px;
}

See full example below:

.OuterDiv {
  width: 1000px;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: #E3EAD7;
  height: 1000px;
}
.Inner1 {
  width: 600px;
  background-color: #6D97C0;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner2 {
  width: 600px;
  background-color: #ECB7D8;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
  float: left;
}
.Inner3 {
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 400px;
}
<div class="OuterDiv">
  <div class="Inner1"></div>
  <div class="Inner2"></div>
  <div class="Inner3"></div>
</div>

Upvotes: 1

David Wilkinson
David Wilkinson

Reputation: 5118

You could wrap the first 2 Inner div's in a wrapping div and give that a property of float: left.

Please note, the below is far from perfect as I don't know the exact context of what the scenario is (I've converted the static widths to percentages for this example) but gives an indication of what you might be able to do?

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

.OuterDiv {
  width: 1000px;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: #E3EAD7;
  height: 1000px;
}
.wrap {
  width: 70%;
  float: left;
}
.Inner1 {
  background-color: #6D97C0;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
}
.Inner2 {
  background-color: #ECB7D8;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 200px;
}
.Inner3 {
  width: 30%;
  background-color: #F5E6AD;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  height: 400px;
  float: left;
}
<div class="OuterDiv">
  <div class="wrap cf">
    <div class="Inner1"></div>
    <div class="Inner2"></div>
  </div>
  <div class="Inner3"></div>
</div>

Clearfix source: http://nicolasgallagher.com/micro-clearfix-hack/

Upvotes: 0

Related Questions