Div with Margin-Left and Width:100% Overflowing on The Right Side

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.

margin left and right on width 100%

Remove the width. As with all block elements, divs will automatically expand to fill the available width. When you specify a width of 100%, you are telling it to be the same size as its container, not to fill the available width. As width does not include margins, specifying the margin in addition to the width causes the div to be shifted to the right by the left margin amount, and the right margin exists off the screen.

Margin-right broken on width 100%

An absolutely positioned element is positioned with top, left, right and bottom, not with margin.

div with 100% width including margins

be sure to use box-sizing: border-box when using padding to force the padding to behave like it should. As far as the horizontal padding goes, you can just add padding: 0 3px; to .container

*{ //adds to all elements or you can just add to the ones that use padding
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;    
}

.container{
  border: 1px solid gray;
  padding: 0 3px; <-----add this
}

FIDDLE

Display a div width 100% with margins

You can use the following CSS to achieve the desired result:

#page {
   background: red;
   overflow: auto;
}

#margin {
   background: green;
   height: 280px;
   margin: 10px
}

Div 100% width and a margin

You don't have to give width when you are using margin-left and margin-right.

Try This:

#main
{
 margin-left: 10%;
 margin-right: 10%;
 background: red;
}

Absolute 100% width div overflows one side

You need to set two or more of the offsets (top, left, right, bottom) for the absolutely positioned element.

In the example below, I created a header with a block border that is 100px in height and it contains .container that is half the height and has 20px margins.

For example, if you want the left and right edges of .parent to coincide with the edges of .container, set the left and right offsets to 20px.

You can control the vertical placement by assigning a value to top.

If you don't specify the offset values, they default to values corresponding to the position of the element that it would have were it in the regular flow of content.

In your original example, the left edge of .parent would correspond to the left edge of .container, since the left edge of .parent would be start at the left edge of .container, and then if you set the width: 100%, this would force the right edge to correspond to 100% of the window width to the right of the default left edge, which causes the overflow.

To fully appreciated what is happening here, you need to read the CSS specification about absolute positioning, namely:

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

especially the concept of the static-position containing block.

body { margin: 0;}header .parent {  border: 1px dashed red;  position: absolute;  height: 50%;  top: 120px;  left: 20px;  right: 20px;}
header { border: 1px solid black; height: 100px; }.container { border: 1px dotted blue; height: 50%; margin: 20px;}

<header>  <div class="container">    <div class="parent">      <div class="child"></div>    </div>  </div></header>

how to position a div, in body with 100% width, with same left and right space?

As easy as that : In your .css file, just remove one thing from .daily class :

width:100%; // remove that and your margin will apply correctly left/right

So your daily class should be like:

.daily {
position: relative;
top: 70px;
height: 110px;
border: 1px solid black;
margin: 0 20px 0 20px;
}

CSS - Left and Right DIV with 100% width

One of the main things you are not considering is having bootstrap columns.

I have modified the example link you gave me and duplicated to have the two columns instead of one. By default, this is the current skeleton or rather structure of the code in the example -

Current Implementation on the example site

<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <!-- your code here -->
                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

</div>

Change to add columns like below -

In here, i suggest you should go on about adding more columns like so -

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-8"> <!-- your leftDiv code here --> </div>
                <div class="col-lg-4"> <!-- your rightDiv code here --> </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

CSS width 100% - margin-right

Change the right and left div order like:

<div id="container">
    <div id="right"></div>
    <div id="left"></div>
</div>

Remove the float:left from #left in your CSS and change #right to float:right

#container {
    width: 100%
}
#left {
    margin-right: 350px;
}
#right {
    float: right;
    width: 300px;
    padding-left: 25px;
}

EDIT:

My solution should work with position: fixed;, just remember to add right:0 to the fixed div.

#container {
    width: 100%
}
#left {
    margin-right: 350px;
}
#right {
    position: fixed;
    right: 0;
    width: 300px;
    padding-left: 25px;
}

---

Related Topics