tom 5

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

Doug 1095
0
points
This was chosen as the best answer

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>
Answered about 7 years ago by Doug
  • 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! tom about 7 years ago
  • 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. Doug about 7 years ago
tom 5
0
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; }
Answered about 7 years ago by tom
Jordan 469
0
points

You can use classes, that should work just fine. However you might want to check out this CSS trick

Answered about 7 years ago by Jordan
  • 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! tom about 7 years ago
Doug 1095
0
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>
Answered about 7 years ago by Doug
  • Thank you. Is there a way to get the middle span centered without having to specify exact pixels though? tom about 7 years ago