Originally Posted by
Stevie D
I would rather have UAs accept calculations than to randomly change the way they derive percentages depending on whether any siblings have a width declared in px. (How would it work if it was declared in em?)
eg
#div1 {width:"70% - 70px";}
#div2 {width:"30% - 30px";}
That would be infinitely more predictable, more user-friendly and more powerful.
If you make sure each element references an immediate parent container, it works pretty well, as is. There may be some benefit to calculations, but for me, it just hasn't come up. Maybe I subconsciously structure to avoid the need.
test case: px, em and pct.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test document</title>
<style type="text/css">
div {
padding: 10px; /* to uncollapse margins and for clarity */
}
#px, #em, #pct {
background-color: silver;
display: inline-block;
padding: 10px;
width: 500px;
}
.boxa {
background-color: pink;
float: left;
}
#px .boxa {
width: 100px;
}
#em .boxa {
width: 6em;
}
#pct .boxa {
width: 20%;
}
.boxb {
background-color: lightgreen;
overflow: hidden;
}
.boxb-1 {
background-color: lightblue;
float: left;
width: 30%;
}
.boxb-2 {
background-color: yellow;
overflow: hidden;
}
</style>
</head>
<body>
<div id="px">
<div class="boxa">
<p>a box of set px width</p>
</div>
<div class="boxb">
<p>what's left after box a</p>
<div class="boxb-1">
<p>30% of boxb</p>
</div>
<div class="boxb-2">
<p>70% of boxb</p>
</div>
</div>
</div>
<div id="em">
<div class="boxa">
<p>a box of set em width</p>
</div>
<div class="boxb">
<p>what's left after box a</p>
<div class="boxb-1">
<p>30% of boxb</p>
</div>
<div class="boxb-2">
<p>70% of boxb</p>
</div>
</div>
</div>
<div id="pct">
<div class="boxa">
<p>a box of set percentage width</p>
</div>
<div class="boxb">
<p>what's left after box a</p>
<div class="boxb-1">
<p>30% of boxb</p>
</div>
<div class="boxb-2">
<p>70% of boxb</p>
</div>
</div>
</div>
</body>
</html>
cheers,
gary
Bookmarks