Content of Div Is Longer Then Div Itself When Width Is Set to 100%

Content of div is longer then div itself when width is set to 100%?

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

_{See here for an icky IE7 compatible method.}

100% DIV width is not really 100%

The 100% value is 100% of the parent's width or the view port. See the documentation.

Child div causes parent div to occupy whole page width

Not entirely sure why you made such simple design into complicated HTML/CSS. But in general you can set the container to display: inline-block as it has the shrink-to-fit feature. Example below without any markup changes.

Don't set .content to absolute position. As if a container contains nothing but absolute positioned elements, it will collapse to nothing, only if you give it some size, but it will not be aware of the content inside, which means the box size cannot be dynamic.

.filled-no-icons {  position: relative;  display: inline-block;  height: 36px;  line-height: 36px;  padding: 0 10px;  color: #fff;}
.filled-no-icons .rectangle-3 {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  border-radius: 4px;  background-color: rgba(0, 150, 136, 255);}
.filled-no-icons .content {  position: relative; /* increase stacking order */}

<div class="filled-no-icons">  <div class="rectangle-3"></div>  <div class="content">    <div class="label">Button</div>  </div></div>
<div class="filled-no-icons">  <div class="rectangle-3"></div>  <div class="content">    <div class="label">Lorem ipsum dolor sit amet</div>  </div></div>

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 inner div is not taking 100% of parent div?

Its a bug when parent height is determined by min-height/max-height children with percentage heights are sized incorrectly.

Just use some other method to assign the height, may be fixed or by using flex or whatever. In following example I added display:flex; to parent and flex: 1; to child:

.full {
  background: yellow;
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  justify-content: center;
  align-items: center;
}

.outer {
  background: blue;
  min-height: 100px;
  min-width: 300px;
  display: flex;
  flex-direction:column;
}

.inner {
  background: red;
  height: 100%;
  width: 100%;
  flex:1;
}

<div class="full">
  <div class="outer">
    <div class="inner"></div>
  </div>
</div>

Centering a div with a width of 100%?

if you want to just center a div within a container.Then you have style div within container as margin:0 auto; . Below is simple demonstration:

.container_{  width:100%;  height:700px;  background:green;}
.centreBox{  width:50%;  height:50%;  margin:0 auto;  background:red;}

<div class="container_">  <div class="centreBox">  </div></div>

CSS - how to set the height of a div when a nested div's height is set to fit-content?

When parent div(#outerDiv) has the relative position and child(#div1) has an absolute position then parent div can not resize itself to the child's size. So I changed some attributes and commented unnecessary parts. Also, I added contenteditable="true" style="outline: none;" to div1 and now it is easy to change size of the text and see the result:

#outerDiv {
  position: relative;
  background: darkblue;
  /* height: 400px; */
  width: 400px;
  padding-top: 100px;
  padding-bottom: 106px; /*height of boxes + 6px border top and bottom*/
}

#box1 {
  position: absolute;
  background: orange;
  height: 100px;
  width: 100px;
  border: 3px darkblue solid;
  bottom: 0;
  left: 0;
}

#box2 {
  position: absolute;
  background: orange;
  height: 100px;
  width: 100px;
  border: 3px darkblue solid;
  bottom: 0;
  right: 0;
}

#div1 {
  /* position: absolute; */
  margin: 0 auto;
  background: white;
  /* height: fit-content; */
  width: 250px;
  /* left: 75px;
  top: 100px; */
}

<div id="outerDiv">
  <div id="box1">
  </div>
  <div id="box2">
  </div>
  <div id="div1" contenteditable="true" style="outline: none;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel fringilla est ullamcorper eget nulla. Pharetra vel turpis nunc eget lorem dolor. At consectetur lorem donec massa sapien. Massa
    tempor nec feugiat nisl pretium fusce id velit. Orci ac auctor augue mauris augue neque gravida. Molestie a iaculis at erat pellentesque. Nisl vel pretium lectus quam id leo in. Quisque non tellus orci ac auctor augue mauris augue neque. Vestibulum
    sed arcu non odio euismod.
  </div>
</div>

How to prevent a DIV from expanding in width?

It looks like you can make an element "appear" as 0 width to its parent, but still have it expand to the parent's width by doing: width: 0px; min-width: 100%.

This seems to be the cleanest, most browser-compatible solution. It also doesn't require changing the display property, which is a plus.

 /* Make it "shrink-to-fit", either inline-block, or position: absolute */ .outer {    /* position: absolute; */    display: inline-block;    border: 1px solid black;  }
  /* This element sets the width of the container */  .has-width {    width: 300px;    margin-top: 10px;    background: rgba(0,128,0,.2);    border-right: 2px solid green;    color: #888;  }
  /* Appears as 0 width to parent, but then expands to fit. */  .dont-expand {    width: 0px;    min-width: 100%;  }

<div class="outer">  <div class="dont-expand">    How do I get this text to wrap    instead of growing the container?  </div>  <div class="has-width">    I should be setting the width of "container".  </div></div>

Div with margin-left and width:100% overflowing on the right side

Just remove the width from both divs.

A div is a block level element and will use all available space (unless you start floating or positioning them) so the outer div will automatically be 100% wide and the inner div will use all remaining space after setting the left margin.

I have added an example with a textarea on jsfiddle.

Updated example with an input.

---

Related Topics