2

Currently I'm having a solution, but I'm almost certain that there's a better solution out there. Basically I'm having a block-element and want to align some of the text at the beginning of my block and some at the end.

Here's a little jsfiddle example

What I'm doing is using float and 2 more block-elements inside to align it:

<div id="block">
    <div id="start">1</div>
    -
    <div id="end">12</div>
</div>

#block {
    text-align:center;
    background: #000;
    color: white;
    width:150px;
}
#start {
    float:left;
}
#end {
    float:right;
}

I have many of those little objects, so my code is bloated with div's. Is there no more lightweight solution for this out there ?

Anonymous
  • 3,679
  • 6
  • 29
  • 40
  • 1
    You just achieved your goal in a pretty way. The only thing is that if you have many elements (as you said) than use a common class for any of those objects `#start` would be `.start`. – Roko C. Buljan Dec 18 '11 at 14:39
  • 1
    you could replace the div's with spans to reduce "div noise" – paulcol. Dec 18 '11 at 14:52
  • 1
    There's nothing wrong with a lot of divs, as long as they're semantic (= mean something). Most people and CMS don't even care about semantics, so there's never anything wrong with a lot of divs =) You could use `` or `` for semantics. Depends on what you do with them. – Rudie Dec 18 '11 at 14:56

2 Answers2

4

I fiddled a possible answer based on the answer to this question.

http://jsfiddle.net/ScHdJ/2/

Works in all browsers, as far as I can see...

Community
  • 1
  • 1
ptriek
  • 9,040
  • 5
  • 31
  • 29
  • I agree with Rudie, it's a very interesting solution and definitely brings away my div's. Although I started doubting whether that's so important at all (as you said in the comment my question). Which way would you prefer/go/recommend ? – Anonymous Dec 18 '11 at 21:06
  • 1
    Personally I would just go for extra spans. My solution is kind of a hack, technically, and may not be future proof in all browsers. It is indeed good practice to avoid unnecessary markup, but in this particular case I'd consider the spans necessary. Interested in hearing @Rudie s opinion though? – ptriek Dec 18 '11 at 22:21
  • I agree =) There's nothing wrong with a few ``s, as long as they mean something. (I like semantics.) In this case I think they might mean a lot: `1` and `12` are definitely values. Especially since you id'd them. (I wouldn't assign id's just to style them. Use classes for that.) – Rudie Dec 19 '11 at 16:30
1

May be you can use CSS :after & :before pseudo classes like this:

HTML:

<div id="block">
    hello
**</div>

CSS:**

#block {
    text-align:center;
    background: #000;
    color: white;
    width:150px;
    overflow:hidden;
}
#block:before{
    content:"1";
    float:left;
}
#block:after{
    content:"12";
    float:right;
}

http://jsfiddle.net/ScHdJ/3/

But is not work in IE7 & below.

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • Thanks for your anser, I thought about that too, but unfortunately my content is dynamic, didn't mention that, sorry! – Anonymous Dec 18 '11 at 21:03
  • Whereas this might work for some things I think generating essential content via CSS is a bad idea for the purposes of SEO and accessibility. Also, some browers still aren't too good with generated content; I'm thinking IE here. – Adam C Jul 20 '12 at 10:57
  • 1
    @AdamC first see the OP question & then see the answer. In that 1 & 12 is not ESSENTIAL content.I Know what is SEO & please check my answer i already explain till which browser :after & :before is working. – sandeep Jul 20 '12 at 11:42
  • Fair comment. I'll be more observant next time. – Adam C Jul 20 '12 at 14:00