it is actually centering it based on the remaining space after the float are calculated.
look at this example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3spans2</title>
</head>
<body>
<div style="text-align:center">
<span style="float:left;">the long text in left span left span</span>
<span style="color:red; outline:1px solid pink">center <br>dydhbhd dhdhashdhahd adshhdsahadhadh dhasdh </span>
<span style="float:right">right</span>
</div>
<div style="width:1px; background:red; height:100%;position:absolute; left:50%;"}></div>
</body>
</html>
as you can see, the text after the line break goes back to the is centered to the page. Actuall; all the text is centered to to the page… but the text where there is a float will be centered to the REMAINING space. When you float something you cause a wrap-around effect.
The only way you could do that would be to remove one of the elements from the page flow with absolute positioning. I would not suggest doing that on a live page, but here is what you wanted to do.
<!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>Demo Layout</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.4 arial,helvetica,sans-serif;
}
#wrap {
width:100%;
overflow:hidden;
text-align:center;
position:relative;
}
.left, .right {
float:left;
background:lime;
position:relative;
z-index:2;
}
.right {float:right;}
.cntr {
position:absolute;
left:0;right:0;top:0;
z-index:1;
background:#CDF;
color:red;
}
</style>
</head>
<body>
<div id="wrap">
<div class="left">the long text in left div</div>
<div class="right">right div</div>
<div class="cntr">centered text</div>
</div>
</body>
</html>
Well, that’s not the ONLY way Rayzur – he could drop it down to it’s own line and then use a negative margin to ride it up.
My only concern using a negative margin or APo would be overlap when the screen is narrow…
Though there’s ANOTHER solution – use DIV as you did, and fix their widths. If you fix the width of the left and right elements the same the centering will always be correct. Of course then you risk word-wrap.
If I were to do that, I’d also make sure to set margins so that the center doesn’t ride under the side columns.
untested, but so simple it shouldn’t need testing:
<!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>
Demo Layout
</title>
<style type="text/css">
body {
margin:0;
padding:0;
font:normal 85%/140% arial,helvetica,sans-serif;
}
.left, .right {
float:left;
width:10em;
background:lime;
}
.right {
float:right;
}
.cntr {
margin:0 10em;
background:#CDF;
color:red;
}
</style>
</head><body>
<div class="left">the long text in left div</div>
<div class="right">right div</div>
<div class="cntr">centered text<br>Multiple Lines</div>
</body></html>
Negating the need for that silly wrapping div
NOT that DIV or SPAN are likely the correct elements for this content – though I’d have to SEE the actual content to figure out what the semantic tags for this stuff would be. CSS is only as good as the markup it’s applied to, which is why the PROPER process is content > Markup > CSS… which is why presentational classnames and inlined CSS is no way to write code.
Though there’s ANOTHER solution – use DIV as you did, and fix their widths. If you fix the width of the left and right elements the same the centering will always be correct. Of course then you risk word-wrap.
Yeah, I meant to edit out that comment I made about it being the ONLY way to do it.
Whatever sort of trick you use it’s going to involve setting some sort of width with some margins/neg-margins thrown in the mix.
Here’s another quick test that kinda works:
<!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>Demo Layout</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.4 arial,helvetica,sans-serif;
}
.left, .right {
float:left;
background:lime;
max-width:25%;
margin:0 -25% 0 0;
}
.right {
float:right;
margin:0 0 0 -25%;
}
.cntr {
text-align:center;
color:red;
}
.cntr p {
margin:0;
padding:0 25%;
background:yellow;
}
</style>
</head>
<body>
<div class="left">the long text in left div the long text in left div</div>
<div class="right">right div right div right div</div>
<div class="cntr"><p>centered text centered text</p></div>
</body>
</html>
