[QUOTE=Chroniclemaster1;4472616][…]is there any reason we can’t have IF and FOR statements?[/QUOTE]
What arguments would the contructs take? Would they be querying the cascade or other aspects of CSS, or could this be achieved via a server side language with the construct values being determined from the server-side implementation?
[QUOTE=Paul O’B;4472394][…]and while I’m asking can I have float:center and float:bottom as well please[/QUOTE]
Requests for float:center are always popping up www-style; you can follow these discussions by searching the mail archive. On a general note, the up-coming layout modules will supersede the float mechanism, and I’d suggest that once we’re able to specifically define the behavior of ‘float:center’ (which is more complex in it’s logic than float’s current values) and for this value to be implemented cross-browser, these more advanced modules should be near to implementation [crosses fingers].
[QUOTE=Stomme poes;4473068]And vertical auto-margins or vertical-align for blocks.[/QUOTE]
The general consensus is that a parent selector of this kind would be too ‘expensive’ from an implementors point of view, and would sacrifice rendering performance generally. I’ll try and dig out a particular email that describes the reasoning in detail.
We tackled float:center in a recent CSS quiz and Erik J came up with a brilliant solution for Firefox 2+ only. However it shows exactly how we would like float:center to work :).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Quiz #18a v3 / erik.j</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
h1, h2 {
margin:20px -100%;
text-align:center;
font-weight:400
}
#container {
margin:auto;
padding:.4em 30% 0;
width:30%;
font:87.5%/1.6 verdana, arial;
}
#floatbox {
float:center; /* :-D */
position:relative;
margin:20px 0 -12em;
height:11.8em;
background:#99f;
}
.float1 {
float:right;
margin-left:.8em;
width:100%;
line-height:.01;
}
.float2 {
float:left;
margin-right:.8em;
width:100%;
line-height:.01;
}
.float3 {
float:right;
margin-top:-.02em;
width:49.99%;
}
.float4 {
float:left;
margin-top:-.02em;
width:49.99%;
}
.wrapbox {
margin-left:49%;
width:2px;
}
.wrapbox .float1 {
margin-left:.2em;
}
.wrapbox .float2 {
margin-right:.2em;
}
p {
border:.2em solid #f66;
margin:-.4em -99.99%;
padding:.2em .8em 1.6em;
background:#ffc;
text-align:justify;
line-height:.01;
}
</style>
</head>
<body>
<div id="container">
<h1>Does FF support #floatbox{float:center}?</h1>
<h2>Test changing browser-width and user font-size and say.</h2>
<div id="floatbox">
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
</div>
<div class="wrapbox">
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
<div class="float1"> </div>
<div class="float2"> </div>
<div class="float3"> </div>
<div class="float4"> </div>
</div>
<p>This is some text that will flow around both sides of the image. The text can still be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float: center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better!</p>
</div>
</body>
</html>
Try it out and be amazed
In all honesty the above is probably the cleverest piece of coding I’ve ever seen in CSS.
I also had a crack at float:bottom and I can get the look of what I’d like but only in IE8.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test {
writing-mode:lr-bt;
text-align:justify;
width:50%;
margin:auto;
padding:10px;
border:5px solid red;
}
span {
width:100px;
height:100px;
float:right;
background:red;
margin:10px 10px 0;
}
</style>
</head>
<body>
<div class="test">
<p><span>float</span> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
</body>
</html>
Try that in IE8 and the float behaves how we would like float:bottom to be implemented.
