<table border="0" width="100%" height="80px">
<tr>
<td width="25%" align="center">This is the left pane</td>
<td width="50%" align="center">This is the middle pane.</td>
<td width="25%" align="center">This is the right pane.</td>
</tr>
</table>
In the example above, the text will vertically center and go to the middle of a cell. How do you reproduce that in CSS?
Here’s what I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<style type="text/css">
#left_pane {
width: 25%;
float: left;
text-align: center;
}
#center_pane {
width: 50%;
float: left;
text-align: center;
}
#right_pane {
width: 25%;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="left_pane">This is the left pane.</div>
<div id="center_pane">This is the middle pane.</div>
<div id="right_pane">This is the right pane.</div>
</div>
</body>
</html>
The first thing that I would do is put the CSS into an external style sheet and call it, say, main.css. Copy/paste the styles you have here into the new style sheet. Then, you should get rid of all the underscores in the id attribute. Of what use is the div with the id “container”. That is not being targeted, get rid of that wrapping div called container.
To link your XHTML file to that new external CSS file, inside the <head> tag, put:
Maybe for debugging purposes, add in the attribute background-color with a bunch of REALLY different colors. Inside #leftpane, add in a color of blue, then green for #middlepane, and red for #rightpane just to get a good visual that you’re seeing three sections (which is all you’ve gotten to on constructing this new site).
If this is for tabular data which is the usual need for vertical centering then use a table.
CSS does not automatically vertically align content with respect to other elements and it makes no association with them. They are just three independent floats that hold content.
You can use the display:table properties for IE8+ and mimic this table behaviour but I’ve yet to see a good example of why your text should be vertically aligned between columns unless as I mentioned above this is for tabular data.
Perhaps if you explain the context and content then a better answer may be more forthcoming
What’s wrong with underscores? I like them myself because it makes it easier to separate strings of characters into words. For example, if we took #center_pane and turned it into #centerpane, it’s not apparent at first glance if the id name means “cent erpane” or “c enterpane” or “centerp ane,” etc.
@Paul O’B:
The old code with tables is a banner at the top of every one of the pages on my (very old) site. In a new page I’ve been working on, I have implemented the jQuery quicksearch plugin, but that is causing the banner to disappear. I figured maybe the quickSearch is interfering with the table in the banner, so I thought maybe turning the banner into CSS would alleviate the problem.
<!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" />
<style type="text/css">
p{margin:0 0 1em}
#container{
width:800px;
margin:auto;
display:table;
word-spacing:-.25em;/* assumes that #container is only wrapping the three elements below*/
border:1px solid #000;
background:#fcf;
}
#left_pane,#center_pane,#right_pane {
width: 25%;
display:inline-block;
text-align: center;
vertical-align:middle;
word-spacing:normal;
background:red;
}
#center_pane {
width: 50%;
background:blue;
}
/* ie6*/
* html #left_pane,
* html #center_pane,
* html #right_pane {
display:inline;
}
* html #center_pane{width:49%}
/* ie7 */
*+html #left_pane,
*+html #center_pane,
*+html #right_pane {
display:inline;
}
*+html #center_pane{width:49%}
</style>
</head>
<body>
<div id="container">
<div id="left_pane">
<p>This is the left pane. This is the left pane. This is the left pane. This is the left pane. This is the left pane. This is the left pane. </p>
</div>
<div id="center_pane">
<p>This is the middle pane. This is the middle pane. This is the middle pane. This is the middle pane. This is the middle pane. This is the middle pane.</p>
<p>This is the middle pane. This is the middle pane. This is the middle pane. This is the middle pane. This is the middle pane. This is the middle pane.</p>
<p>This is the middle pane. This is the middle pane. This is the middle pane. This is the middle pane. This is the middle pane. This is the middle pane.</p>
</div>
<div id="right_pane">
<p>This is the right pane. This is the right pane. This is the right pane. This is the right pane. This is the right pane. This is the right pane. This is the right pane. This is the right pane. </p>
</div>
</div>
</body>
</html>
You shouldn’t be using the doctype you were using unless you know why you were using that specific one otherwise use the doctype I’ve posted above.
I wouldn’t do that without good reason and without seeing the structure of the code first. There may well be a stacking issue but throwing code at elements is a hit and miss and could cause more problems in the long run.
Please enlighten me as I really need to know this stuff (or just point me to a link that explains it all): How do the “* html” and “*+html” hacks work? Also, why was it necessary to subtract 1% from the width from the center pane?
The star selector hack (* html) is explained in the reference here. It makes use of a flawed parser in IE6 that thinks html has a parent which it hasn’t as html is the root element. The rule is valid css but should not match any element however IE6 treats it as though you had just said html .test{background :red} (without the star - the universal selector).
IE7 fixed the star selector hack but only botched it by simply testing for * html instead of fixing the parser which left the gate open to use *+html for ie7 in the same manner that * html works for IE6.
The percentage was reduced because IE6 can’t add up and 50% + 50% quite often equals 101% in IE6 and will not fit onto one line. Therefore always allow IE7 and under a little leeway when using percentages. If the element is a fixed pixel width then use exact pixels instead.
* html means an <html> element that is a child of something (anything) else. IE6 is the only browser stupid enough to think that <html> can be a child of anything else, so it is the only browser that applies the rule.
*+html means an <html> element that is a sibling of something (anything) else. IE7 is the only browser stupid enough to think that <html> can be a sibling of anything else, so it is the only browser that applied the rule.
All the XML application stuff that 1.1 brings you – doesn’t work consistently across browsers that allegedly support it, and IE doesn’t even know what to do with real XML.
The only reason to use XHTML at this point is the stricter formatting rules that IMHO prevent you from making mistakes that HTML 4.01 will let you – as such, XHTML 1.0 Strict is the best choice if you care about browser compatibility and structural rules that can stop you from making mistakes in the first place. Really, that’s the ONLY reason to use XHTML instead of HTML 4.01 Strict – the better/stricter formatting rules.
XHTML 1.0 has an entire section of the specification devoted to backwards compatibility, while 1.1 throws the mere notion of backwards compatibility in the trash. XHTML 1.1 is an abandoned pipe-dream with piss poor browser support and effectively a technological dead end so far as it’s use as a web technology is concerned.
… and remember, newer isn’t always better; see HTML 5.
