How to Make a Div Take The Full Width of The Page When It Is Inside Another Div That Have 90% Width

How can I make a DIV inside a DIV use 90% of the width?

It is working fine you can't see that because both have red background color i changed it to green see this http://jsfiddle.net/vm3b350r/.

<div style="padding: 1rem 0;background-color:red">  <div style="width: 90%;margin: 0 auto 0 auto; background-color:green">    xxx  </div></div>

How can I have a div take up the full width of the screen?

https://jsfiddle.net/MarcusPls/h6sprgnm/

.box3 {
    background-color: #ccc;
    text-align: center;
  width: 100%;
  top: 100px;
  position: relative;
}

<div class="box3">
Box 3: I want this box to be below box 3 as I have it today, but I want this box to take up the entire width of the browser.
</div>

Here is an example of one way to work around your problem..

Also, you don't need to use /> for <br> to break a line... it is like pressing the enter key so just use "<br>"

Expand a div to fill the remaining width

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.

Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

Demos:

Fixed Left: http://jsfiddle.net/A8zLY/5/
Fixed Right: http://jsfiddle.net/A8zLY/2/

div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
}

<div>Tree</div>
<div class="second">View</div>

How can I expand a child div to 100% screen width if the container div is smaller?

You can set the width based on the vw (viewport width). You can use that value too using the calc function, to calculate a left-margin for the div. This way you can position it inside the flow, but still sticking out on the left and right side of the centered fixed-width div.

Support is pretty good. vw is supported by all major browsers, including IE9+. The same goes for calc(). If you need to support IE8 or Opera Mini, you're out of luck with this method.

-edit-

As mentioned in the comments, when the content of the page is higher than the screen, this will result in a horizontal scrollbar. You can suppress that scrollbar using body {overflow-x: hidden;}. It would be nice though to solve it in a different way, but a solution using left and rightlike presented in Width:100% without scrollbars doesn't work in this situation.

-edit 2021-

Another work-around for the scrollbars, which may be acceptable or not depending on your situation:

By making the green div a little bit smaller, say 20px, you can keep a bit of space for the scrollbar. Half that reserved width can be added to the margin, to keep the wide div centered:

#wide-div {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);

div {
  min-height: 40px;
  box-sizing: border-box;
}
#container {
  position: relative;
}
#parent {
  width: 400px;
  border: 1px solid black;
  margin: 0 auto;
}

#something {
  border: 2px solid red;
}

#wide-div {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);
  border: 2px solid green;
}

<div id="container">
<div id="parent">
  <div id="something">Red</div>
  <div id="wide-div">Green

<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
<br>Green
</div>
  <div id="something-else">Other content, which is not behind Green as you can see.</div>
</div>
</div>

How to center a div in the remaining space left by sibling divs

You let the browser calculate the margins for you:

margin-left: calc((10% + 50px) / 2);
margin-right: calc((10% - 50px) / 2);

* {  padding: 0;  margin: 0;}
#nav-top {  position: sticky;  top: 0;  z-index: 1;  height: 50px;  margin-bottom: 20px;  background-color: DodgerBlue;}
#nav-left {  position: fixed;  top: 50px;  width: 50px;  height: 100%;  background-color: Silver;}
#body-content {  background-color: Tomato;  color: white;  width: 90%;  margin: auto;  margin-left: calc((10% + 50px) / 2);  margin-right: calc((10% - 50px) / 2);}

<div id="nav-left"></div><div id="nav-top"></div><div id="body-content">  <div id="breadcrumb">You are here: Home</div>  <div class="jumbotron">    <h1>Builder v2</h1>    <p class="lead">Software v2 is the new version of the site!</p>  </div>  <div class="content-row">    <div class="col-33">      <h2>Fun!</h2>      <p>Improved for more fun!</p>    </div>    <div class="col-33">      <h2>Challenging!</h2>      <p>Improved to be more challenging!</p>    </div>    <div class="col-33">      <h2>Share it!</h2>      <p>New features to share your best moments!</p>    </div>    <div class="col-33">      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>      <p>Lorem ipsum dolor sit amet.</p>    </div>  </div>  <hr>  <footer>    <p class="copyright">2019</p>  </footer></div>

Two divs, one fixed width, the other, the rest

See: http://jsfiddle.net/SpSjL/ (adjust the browser's width)

HTML:

<div class="right"></div>
<div class="left"></div>

CSS:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?

How to cover a div with another div as overlay

take the both div inside a root div.Then set the root div position:relative and overlay div absolute. fix the height and width. and apply display:bloCK on overlay div. If still does not work than apply z-index.

This should be like:
HTML:

<div class="parent">
     <div id="area" class="area"></div>
     <div class="area cover"></div>
</div>

CSS:

.parent{
  position: relative;
  height:200px;
  width: 200px;
}
.cover{
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
  z-index: 999;
}

Hopefully this will work for you.

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.