CODEWITHSUNDEEP
htmlcss
IntegrateThis
IntegrateThis

Reputation: 962

Inner Div with larger width than outer div

Suppose I have an Outer Div with a size:1200px, and within this div that I wanted to have an Inner Div that is wider, just for the purpose of fitting more horizontal stuff into a window.

As of right now the following CSS is not achieving this. Any tips appreciated.

.OuterDiv {
  width: 1200px;
}
.InnerDiv {
  width: 1400px;
}
<div class="OuterDiv">
  <div class="InnerDiv"></div>
</div>

Upvotes: 3

Views: 5904

Answers (2)

Miguel Angelo Cacilhas
Miguel Angelo Cacilhas

Reputation: 91

You're just not vizualising, but to add, try adding the overflow property and some colors:

.OuterDiv {
  width: 1200px;
  height: 500px;
  background-color: #f00;
  overflow: scroll;
}
.InnerDiv {
  width: 1400px;
  height: 500px;
  background-color: #0f0;
}

Upvotes: 2

Kevin Jantzer
Kevin Jantzer

Reputation: 9471

Try this. I added height and background so you could see the boxes.

The key is overflow: auto

.OuterDiv {
  width: 200px;
  height: 140px;
  background: blue;
  overflow: auto;
}
.InnerDiv {
  width: 1400px;
  height: 90%;
  background: orange;
}
<div class="OuterDiv">
  <div class="InnerDiv"></div>
</div>

Upvotes: 3

Related Questions