Cross Browser Method to Fit a Child Div to Its Parent's Width

Cross browser method to fit a child div to its parent's width

The solution is to simply not declare width: 100%.

The default is width: auto, which for block-level elements (such as div), will take the "full space" available anyway (different to how width: 100% does it).

See: http://jsfiddle.net/U7PhY/2/

Just in case it's not already clear from my answer: just don't set a width on the child div.

You might instead be interested in box-sizing: border-box.

How can I make the child div to have the same width as the parent div?

Your css for middle-box uses max-width, which allows the content to expand up to a certain maximum, but will shrink the width to fit the content until that maximum is reached. You want width: 100%; like you tried before.

If middle-box still doesn't reach the edges of the parent main element, then use the margin: 0; and padding: 0; as needed.

I recommend using the element selector in Chrome dev tools. You can select or mouse-over the .main and .middle-box elements and Chrome dev tools will display the margin and padding for each element. Then you know where your issue is coming from. Other browsers have similar functionality.

Is there a way to make a child DIV's width wider than the parent DIV using CSS?

Use absolute positioning

.child-div {
    position:absolute;
    left:0;
    right:0;
}

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.

Why does my div not take its parent div's width?

There are a couple ways to achieve what you want. I do understand why you need it to be fixed with what I think you are trying to achieve. That is also what is causing the problem. Setting position "fixed" removes the element from the document flow.

Because you have already hard coded the left-nav width, adding the following to what you already have will work for you.

    #header {
        right:0;
        left:250px;
    }

If you want to line the fixed element up with the content, you will need to take a couple of things into account.

1. The body has a max-width of 1200px. That means, you have to take that into account when figuring this out, and it can get tricky.
2. The auto margin is something you can never know exactly without using another reference.
3. For screens smaller than 1200px, you need to add a media query. Anything under 100% will not work normally below 1200px with the calculation. Additionally, in order to align the right edges, you need to add a fixed margin to the #content and right offset the header the same amount. If you don't care about the right edges, you can just right offset the header however much you want.

    #content {
      /* ... other css you had */
      margin-right:15px;
    }
    #header {
         /* ... other css you had */
         text-align:center;
         left: 250px;
         right: 15px;
    }
    @media screen and (min-width:  1200px) {
        #content {
           margin-right:0;
        }
        #header {
          left: calc(((100% - 1200px ) /2) + 250px);
          right: calc((100% - 1200px) /2);
        }      
    }

So all that will work, but calc slows down rendering (some), and my sense is that this will be something that you end up having to change in the future. I recommend finding another way to achieve your goal. However, within the constraints you have given, the above will work.

How can I expand floated child div's height to parent's height?

For the parent element, add the following properties:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

then for .child-right these:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Find more detailed results with CSS examples here and more information about equal height columns here.

DIV fit width content in parent

You should use white-space: nowrap to #container div.

#container {  width: 500px;  overflow: hidden;  white-space: nowrap;}#list {  position: relative;  left: 0px;}.item {  float: left;}.elem {  background: orange;  width: 200px;  height: 200px;  border: 1px solid #000000;  display: inline-block;}

<div id="container">  <div id="list">    <div class="elem"></div>    <div class="elem"></div>    <div class="elem"></div>    <div class="elem"></div>    // more ...  </div></div>

---

Related Topics