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

Question

Considering:
For elements that are absolutely positioned inside a relatively
positioned container.
If you want the element to fill the width of the container.
The element is also bottom-aligned.
Is it best for maximum browser compatibility to set a width in pixels for the element, or simply use left and right?
Any common bugs to watch out for with either method?
Clearly, using left: 0; and right: 0; would make the code more manageable in cases where the image's width or padding were to change, but are there any downsides where width: 300px would be favorable instead?

Answer 1

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.

Answer 2

Both methods are fine, but if you want your design to be responsive or mobile phone compatible - I would recommend using Left: and Bottom: if the container is not enclosed in <div>.
If it is enclosed in a <div> then doing it with width: 100% ormax-width: 200px is a way in my opinion that causes least display problems.
Avoid using fixed widths in CSS if you want your theme to be responsive.

Answer 3

Both of the solution is working in every browser without any problems. In these cases I like to add a width: 100%; left: 0; bottom: 0; for the element, but if you like left:0;right:0; bottom:0; more, than you can use that, too.

Answer 4

I haven't tested this on all browsers (and modes) but for the IE quirks mode (e.g. in an .HTA without !DOCTYPE defined), I have created a subroutine that corrects the WIDTH or HEIGHT on elements where the LEFT/RIGHT style or the TOP/BOTTOM style are set (not “auto”). To avoid going in to all kind of unit conversions, the routine temporary removes the LEFT (or TOP) style and sets the WIDTH (or HEIGHT) to 100% to determine the RIGHT (or BOTTOM) offset in pixels.
The script is written in VBScript, but it should be do difficult to translate the idea to JavaScript.
<html>
<head>
<script language="VBScript">
Option Explicit
Sub Justify(ByVal hElement)
Dim sStyleTop, iTop, iBottom, sStyleLeft, iLeft, iRight
With hElement
If .currentStyle.top <> "auto" And .currentStyle.height = "auto" And .currentStyle.bottom <> "auto" Then
iTop = .offsetTop
sStyleTop = .currentStyle.top
.style.top = "auto"
.style.height = "100%"
iBottom = -.offsetTop
.style.height = .offsetHeight - iTop - iBottom & "px"
.style.top = sStyleTop
End If
If .currentStyle.left <> "auto" And .currentStyle.width = "auto" And .currentStyle.right <> "auto" Then
iLeft = .offsetLeft
sStyleLeft = .currentStyle.left
.style.left = "auto"
.style.width = "100%"
iRight = -.offsetLeft
.style.width = .offsetWidth - iLeft - iRight & "px"
.style.left = sStyleLeft
End If
For Each hElement In .Children
Justify hElement
Next
End With
End Sub
Sub window_onload
Justify Document.body
End Sub
</script>
<style type="text/css">
body {
position:absolute;
width:100%;
height:100%;
}
#outer{
background:blue;
position:absolute;
top:10px;
right:20px;
bottom:30px;
left:40px;
}
#inner{
background:green;
position:absolute;
top:40px;
right:30px;
bottom:20px;
left:10px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>
The command to justify all elements in a document is:
Justify Document.body
I am invoking this from the onload event as it concerns a fixed size .HTA in my case but I expect the routine also to work on the onsize event for sizable windows (or parent elements).