I'm designing something that's going to have several different status bars.
Here's two;
http://picasaweb.google.com/lh/photo/912JgIbSjeHslqnCO2M-kQ?feat=directlink
What's the most elegant way of left, centre and right aligning the text in a bar like this?
<div id="barname"><span class="lh"></span><span class="centre"></span><span class="rh"></span></div>
(I know you're not supposed to use classes like lh? but wasn't sure of a better alternative?
Would you then just float the centre and rh?
5 answers
points
Here's a way that doesn't require setting the width on the center portion but requires changing the source order a bit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Status bar example</title>
<style>
div#statusbar {
background:lightgreen;
padding:5px 0;
float:left;
width:700px;
font:10px arial,sans-serif;
}
div.status {
float:left;
width:195px;
margin-left:5px;
}
div.displayed {
text-align:center;
}
div.clear {
float:right;
width:195px;
text-align:right;
margin-right:5px;
}
</style>
</head>
<body>
<div id="statusbar">
<div class="status">Filtered</div>
<div class="clear"><u>View all</u></div>
<div class="displayed">Showing 140 of 309</div>
</div>
</body>
</html>
- Works a charm! Are there any drawbacks to using divs as opposed span here? Is it semantically better to use a <p> instead of a <div> here? I'm guessing it doesn't really matter. Thanks!
- I used divs because I needed display:block to make the spans work; divs are automatically display:block, so that cleaned up the CSS a tiny bit. Otherwise, semantically there is no difference. I personally wouldn't use p, which I reserve for body text.
points
http://stackoverflow.com/questions/1062783/css-left-and-right-alignment-on-the-same-line
points
Is this ok? It seems to work?
.center {
float:left;
width:33%;
text-align:center;
}
.rh {
float :right;
width:33%;
text-align:right;
}
.lh {
float:left;
width:33%;
}
.barname { overflow:hidden; }
points
You can use classes, that should work just fine. However you might want to check out this CSS trick
- I've got this to work with the left and the right. I used overflow:hidden instead of the div clear it recommended. Still need to get that middle element centre aligned though!
points
There are many ways of doing this. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Status bar example</title>
<style>
div#statusbar {
background:lightgreen;
padding:5px 0;
float:left;
width:700px;
font:10px arial,sans-serif;
}
span.status {
float:left;
width:195px;
margin-left:5px;
}
span.displayed {
float:left;
width:300px;
text-align:center;
}
span.clear {
float:left;
width:195px;
text-align:right;
margin-right:5px;
}
</style>
</head>
<body>
<div id="statusbar">
<span class="status">Filtered</span>
<span class="displayed">Showing 140 of 309</span>
<span class="clear"><u>View all</u></span>
</div>
</body>
</html>
- Thank you. Is there a way to get the middle span centered without having to specify exact pixels though?
