CSS Positioning to Fill Container: Width VS. Left/Right

CSS positioning to fill container: width vs. left/right?

Historically we learnt to use width instead of left & right because IE6 didn't support
at the same time the two properties of the same axis

<div style="top:0;bottom:0;position:absolute;">modern browsers</div>

<div style="top:0;height:100%;position:absolute;">MSIE6</div>

<div style="left:0;right:0;position:absolute;">modern browsers</div>

<div style="left:0;width:100%;position:absolute;">MSIE6</div>

<div style="left:0;right:0;top:0;bottom:0;position:absolute;">modern browsers</div>

<div style="left:0;top:0;height:100%;width:100%;position:absolute;">MSIE6</div>

Also, this technique will not work on some elements (including on modern browsers, by spec )

<!-- these will not work -->
<!-- edit: on some browsers they may work,
but it's not standard, so don't rely on this -->

<iframe src="" style="position:absolute;top:0;bottom:0;left:0;right:0;"></iframe>

<textarea style="position:absolute;top:0;bottom:0;left:0;right:0;"></textarea>

<input type="text" style="position:absolute;left:0;right:0;">

<button ... ></button>

and possibly others... (some of these can't even be display:block)

---

But, analysing what happens in the normal static flow using the width:auto property

<div style="width:auto;padding:20px;margin:20px;background:lime;">a</div>

You will see it's very similar to...

<div style="width:auto;padding:20px;margin:20px;background:lime;
    position:absolute;top:0;left:0;bottom:0;right:0;">b</div>

... same properties with the same values! This is really nice! Otherwise it will look like:

<div style="width:100%;height:100%;
    position:absolute;top:0;left:0;">
    <div style="padding:20px;margin:20px;
        background:lime;">c</div>
</div>

Which is also different, because the inner div doesn't fill the y axis.
To fix this we will need css calc() or box-sizing and an unnecessary headache.

---

My answer is, left + right | top + bottom are really cool since they are closest to the static positioning's width:auto
and there is no reason to not use them. They are way easier to use compared to the alternative and they
provide much more functionality (for example, using margin-left, padding-left and left at the same time in
one single element).

left + right | top + bottom is considerably
better supported by browsers compared to the alternative width:100% + box-sizing | calc()
and it's also easier to use!

Of course if you don't need (as in your example) to grow the element also in the y axis,
width:100% using some nested element for the padding, it's the only solution to archive support also for MSIE6

So, depends by your needs. If you want to support MSIE6 (it's the only actual reason to do that) you should use with:100%, otherwise use left + right!

Hoping to be helpful.

CSS position absolute and full width problem

You could set both left and right property to 0. This will make the div stretch to the document width, but requires that no parent element is positioned (which is not the case, seeing as #header is position: relative;)

#site_nav_global_primary {    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

Demo at: http://jsfiddle.net/xWnq2/, where I removed position:relative; from #header

left and right container are not being positioned next to the content container

I
like using flexbox for this kind of cases:

h1, h2 {

  font-family: Lato;

}

    html, body {

        margin: 0;

        padding: 0;

        width: 100vw;

        height: 100%;

    }

    .main-container {

        top: 0;

        left:0;

        width: 100%;

        height: 100%;

        background: green;

        padding: 0;

        display:flex;

        margin:0 auto;

        justify-content: center;

        align-content: flex-start;

    }

    .right-container {

        top:0;

        min-width: 10% ;

        background-color: purple;

        height:100%;

 }

    .left-container {

        top: 0;

        min-width: 10%;

        background-color: blue;

        height:100%;

 }

    .content-container {

        top:0;

        background: red;

        width:800px;

        height:100%;

        max-width:80%;

    }

<html>

<body>

    <div class="main-container">

        <div class="left-container">

            <p>This is the left container</p>

        </div>

        

        <div class="content-container">

            <p>This is the content container</p>

        </div>

        

        <div class="right-container">

            <p>This is the right container</p>

        </div>

    </div>

</body>

</html>

Make a button fill the full width of container element?

Add the "box-sizing: border-box" property to all elements. The width and height properties include the padding and border, but not the margin. This will ensure your measurements across elements are correct and take into account the padding. display: block and width: 100% is the correct way to go full width but you need to remove the left/right margin on the button as it pushes it outside the containing element.

* {
    box-sizing: border-box
} 

.container {
    background-color: #ddd;
    padding: 10px;
    margin: 0 auto;
    max-width: 500px;
}

.button {
    background-color: #bbb;
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 100%;
}

for more information on the box-sizing property, read the MDN docs.

CSS position absolute and width of parent container in percent

You have forgotten two elements for display 100%.

Correction here

1st elements forgets it's :
Position relative on level_1 > li

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    **position:relative;**
}

2nd elements corrections it's :
change size of 2nd li

.level_2 {
    display: none;
    position: absolute;
    width: 100%;
}

With "width:100%" on .level_2 it automatically turns out with the width of its parent.

CSS - Two Divs fixed and fill BUT absolute position

I made some slight changes to your fiddle.

By removing the width, and instead setting a left and right position, the div will automatically fill the space between those two points. Because your right div is a fixed width, you can set the right position on the left div to that number plus any gap you want between the divs (and any gap you create on the left side).

position: absolute doesn't negate the relationship the element has with its parent.

how do I make a container offset to the left at a particular point and fill the remaining space in css

Instead of absolute positioning as suggested in the other answers, I would go with calc() here, which allows you to do some basic math in CSS. (Absolute positioning is not a tool for basic layouting, and can lead to a lot of other issues with the rest of the document flow.)

The trick is to simply divide the available window width (100%) in half, subtract half of the max-width of container a - and then set that as margin-left for container b.

I went with a smaller max-width of 500px here, so that the effect is easily visible here in the rendered snippet, but you can easily modify this accordingly, for the max-width you actually need.

div {
  background: #ccc;
}

.container-a {
  max-width: 500px;
  margin: 1em auto;
}

.container-b {
  margin: 1em auto;
  margin-left: calc(100% / 2 - 250px) /* 250px = half the max-width of container a */
}

<div class="container-a">
  I am container-a
</div>
<div class="container-b">
  I am container-b
</div>

Two divs (left, right) in parent, right with fixed width, left fill free space, both in same line. (without position relative/absolute)

You could do it like this:

JSFiddle - DEMO

CSS:

.container {
    width: 500px;
    background-color: bisque;
    height: 50px;
    display: table;
}
.container .left {
    background-color: burlywood;
    height: 50px;
    display: table-cell;
    width: 100%;
}
.container .right {
    background-color: chartreuse;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: text-top;
}

---

Related Topics