My view on the inside parent division, regarding px and %. em is not accounted for.
Classic cases
-
What happens if a fixed width parent has child elements with only fixed values for their width?
a) If the total width of the child elements is less than the parent width
b) If the total width of the child elements is equal to the parent width
c) If the total width of the child elements is greater than the parent width
-
What happens if a relative width parent has child elements with only relative values for their widths?
a) If the total width of the child elements is less than the parent width
b) If the total width of the child elements is equal to the parent width
c) If the total width of the child elements is greater than the parent width
Classic bad(?) cases
3. What happens if a fixed width parent has child elements with mixed values, fixed and relative, for their width?
a) If the total width of the child elements is less than the parent width
b) If the total width of the child elements is equal to the parent width
c) If the total width of the child elements is greater than the parent width
- What happens if a relative width parent has child elements with mixed values, fixed and relative, for their width?
a) If the total width of the child elements is less than the parent width
b) If the total width of the child elements is equal to the parent width
c) If the total width of the child elements is greater than the parent width
New good(?) cases
5. What should happen if a fixed width parent has child elements with mixed values, fixed and relative, for their width?
a) If the total width of the child elements is less than the parent width
b) If the total width of the child elements is equal to the parent width
c) If the total width of the child elements is greater than the parent width
- What should happen if a relative width parent has child elements with mixed values, fixed and relative, for their width?
a) If the total width of the child elements is less than the parent width
b) If the total width of the child elements is equal to the parent width
c) If the total width of the child elements is greater than the parent width
Do we need to go over cases #1-#4?
The proposed algorithm for case #5 and #6
Very simple: when there are mixed values, fixed and relative, for child elements, regardless of the parent having its width expressed in a fixed or relative system, AFTER assigning first the fixed values, the relative values should always reference the remaining parent width (as being “the new” 100%).
The cases where the total widths values of the child elements is less/greater than the parent width, fixed and/or relative, should be treated the same way as they are now for the cases #1 and #2.
The essential: “inside” box model.
When there are mixed values, fixed and relative, the fixed value should be “assigned” first. The relative value should be “assigned” last, it should only account for the remainder of the width, referenced as “the new” 100%. This “the new” 100% should not be confused with what 100% width for the parent width means “outside” child elements context. “The new” 100% only exists “inside” child elements context. 100% width for the parent will still mean a full 100% for the parent, regarding the relation the parent has with its siblings or parent elements: its “outside” box model.
Cases #1 and #2 are pretty straight forward.
Here’s the bad(?) behaviour for cases #3 and #4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<title>Fixed vs. Relative</title>
<style type="text/css">
body {
margin:1em;
border:0;
background:gray;
}
div {
margin:0;
border:0;
}
h2 {
margin:2em 0 0 2em;
text-decoration:underline;
}
.fixed, .relative {
border:1px solid white;
}
.fixed { width:500px; }
.relative { width:100%; }
.floats .main {
overflow:auto;
}
.main div {
height:100%;
}
.header {
background:yellow;
}
.floats .main div {
float:left;
}
.inlineblocks .main div {
display:inline-block;
vertical-align:top;
}
.ms1 {
width:100px;
background:red;
}
.ms2 {
width:70%;
background:white;
}
.ms3 {
width:30%;
background:cyan;
}
.footer {
background:yellow;
}
</style>
</head><body>
<h1>Mixed px & % child value - Fixed vs. Relative parent width</h1>
<h2>1st test - fixed parent width w/ mixed child widths: px & %</h2>
<h3>Floats</h3>
<div class="fixed floats">
<div class="header">
header div
</div>
<div class="main">
<div class="ms1">
a floated div here
</div>
<div class="ms2">
div floated
</div>
<div class="ms3">
another floated div
</div>
</div>
<div class="footer">
footer div
</div>
</div>
<h3>Inline Blocks</h3>
<div class="fixed inlineblocks">
<div class="header">
header div
</div>
<div class="main">
<div class="ms1">
an inline block div here
</div><div class="ms2">
div inline block
</div><div class="ms3">
another inline block div
</div>
</div>
<div class="footer">
footer div
</div>
</div>
<h2>2nd test - relative parent width w/ mixed child widths: px & %</h2>
<h3>Floats</h3>
<div class="relative floats">
<div class="header">
header div
</div>
<div class="main">
<div class="ms1">
a floated div here
</div>
<div class="ms2">
div floated
</div>
<div class="ms3">
another floated div
</div>
</div>
<div class="footer">
footer div
</div>
</div>
<h3>Inline Blocks</h3>
<div class="relative inlineblocks">
<div class="header">
header div
</div>
<div class="main">
<div class="ms1">
an inline block div <br>here
</div><div class="ms2">
div inline block
</div><div class="ms3">
another <br>inline block <br>div
</div>
</div>
<div class="footer">
footer div
</div>
</div>
</body></html>
