0

I have a fiddle, that while basic to some is not very to me, The two elements in the fiddle are in their own div (and span), as they should be - they each have a display: block and their text-align is either left or right based on where they should be in the containing element. The issue I cannot seem to figure out with out doing some kind of hacky css, like position relative; and top: 10px (roughly) - is how to make them on the same line That is .text-one and .text-two should be on the same line, both "aligned" to their side of the element. I could do it all in one div, but I want them in separate "containers" as you see them.

Thoughts? I believe this is rather simple, but I cannot figure it out for the life of me.

user3379926
  • 3,855
  • 6
  • 24
  • 42

3 Answers3

2

FIDDLE

Either use inline-block along with width of 50% or better use float:left on .text-one if you want to use display:block

Lokesh Suthar
  • 3,201
  • 1
  • 16
  • 28
1

http://jsfiddle.net/sLj65/6/

.box .text-one{
    float:left;
    text-align: left;
}

.box .text-two{
    float:right;
    text-align: right;
}

display:block; means they will not appear on the same line if a float is not set, to do this you must float them to either side. I would also add max-width:50%;to each .box element if you plan on adding more text to each element.

Yusaf Khaliq
  • 3,333
  • 11
  • 42
  • 82
  • Your last comment, that as `block` displayed elements are not shown on one line is not totally true actually. They will, if they are floated, but by default they have a width of 100%. So `display: block` together with a `width` (or `max-width`) will do the trick – giorgio Mar 07 '14 at 16:24
  • that's what i meant without the float! – Yusaf Khaliq Mar 07 '14 at 16:25
  • "to do this you must float them" by adding float `display:block;` is made redundant and is made the default, so it's pointless keeping it! – Yusaf Khaliq Mar 07 '14 at 16:27
  • not true either ;) displaying a span as a block element gives you a different result, as a span is normally `inline`, meaning any width and height will be ignored. This isn't necessarily important in this case, but if you give an answer, you should be precise and correct IMO – giorgio Mar 07 '14 at 16:30
  • I said when floated the default is made block.... not that the default of span is block :D – Yusaf Khaliq Mar 07 '14 at 16:34
  • yup, I understood. So I said adding display:block is _not_ redundant ;) – giorgio Mar 07 '14 at 16:35
  • if it's set then it's made redundant if display inline is set then it's changed, are your being purposefully difficult!! http://stackoverflow.com/a/6373639/1742280 – Yusaf Khaliq Mar 07 '14 at 16:38
  • Aaaah, you're totally right! (as I didn't realize `inline` will convert to `block` automatically when floating). And with your addition in your last edit ("if a float is not set") you corrected the possible confusion on which I remarked in my first comment. You just earned yourself a +1 ;) (and no, I was not bugging you purposefully ;)) – giorgio Mar 07 '14 at 16:43
  • Sorry my bad, I changed it as to not confuse any one else :) – Yusaf Khaliq Mar 07 '14 at 16:44
0

You can do this by simply floating the elements.

CSS

.box{
    border: 1px solid #333;
    padding: 14px 27px 10px 15px;
    min-height: 60px;
    min-width: 60px;
}

.box .text-one{
    display: block;
    text-align: left;
    float:left;
}

.box .text-two{
    display: block;
    text-align: right;
    float:right;
}

http://jsfiddle.net/sLj65/7/

DreamTeK
  • 32,537
  • 27
  • 112
  • 171