12

I have a variable size block of text, which I would like centered in a div. The width of the div is a % of its parent element, and the height is defined by padding however tall the center text is. This is easily achieved via:

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

That works fine.

But when I try to add the part on the right:

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
    <div style="float: right;">ASDF!</div>
</div>

then it counts the width of the text on the right towards the total width of the text, and puts the "ASDF!" on the right, but puts the "Lorem ipsum..." more to the left than it ought to be (as if the total length of lorem... included the asdf!).

Here's a mockup of what I'm trying to achieve:

Mockup of what I'm trying to achieve.

I think this would be pretty easy with flexbox, but I want to avoid using anything recent because I need to support old browsers.

This question seems relevant, but (correct me if I'm wrong) it seems to require known widths.

How would I best go about doing this?

Community
  • 1
  • 1
user992364
  • 442
  • 3
  • 18

9 Answers9

15

Try this:

<div class='content' style="width: 50%; padding: 15px; text-align: center; position: relative">
    <div class="noDown" style="position: absolute; right: 0;">ASDF!</div>
    Lorem ipsum...
</div>​

JsFiddle Test: http://jsfiddle.net/3Y7ty/2/

karacas
  • 2,054
  • 1
  • 19
  • 29
4

IE8+ Old Enough?

Building upon your fiddle, you can get what you want in IE8+. Note that the wrapper #b needs to have the box-sizing property set to get it to width: 50% including padding. Then for your floated element, just add this:

margin: 0 -15px 0 -100%;

The -15px right margin accounts for your 15px of right padding to pull the item fully to the right, and then the -100% left margin causes the preceding text to fully center.

Or IE7 Support Needed?

You mention the need to support "older browsers," but you do not give any information about how hold (IE8 is "old" now, but perhaps you refer to even older). If you need IE7 (or lower?) support, then you will need to conditionally target IE7 and use this instead:

margin: -1.2em -15px 0 0;

IE7 does not recognize the float: right the same as later browsers, and it will put it "below" the preceding text, and the -100% left margin will pull the floated element clear back to the left. So that goes away, and to pull the text up in line with the preceding text, we give it a negative top margin that should be set equal to the line-height of the font being used (which is usually going to be 1.2 or 1.1; you may want to explicitly set it on the #b container). I have not tested to see if this works in IE6.

ScottS
  • 71,703
  • 13
  • 126
  • 146
2

Is this any good for you? http://jsfiddle.net/3Y7ty/

.container {
    width:100%;
    overflow:hidden;
    position:relative;
}
.center {
    width:50%;
    padding:15px;
    margin:0 auto;
    background:#ccc;
}

.right {
    display:inline-block;
    padding:15px;
    background:#999;
    position:absolute;
    right:0;
    top:0;
}


<div class="container">

 <div class="center">
     Lorem ipsum...
 </div>

 <div class="right">
     ASDF!
 </div>

</div>
Billy Moat
  • 20,792
  • 7
  • 45
  • 37
2

I have added this fiddle. http://jsfiddle.net/nQvEW/68/ .Check this out.

I have positioned the main element to be as absolute while one of the child elements to be relative to the parent and other one as absolute. The top and left attributes can be adjusted according to your need. But i have hard coded the following for the main div element. You can add this as the CSS.

position:absolute;
width:500px;
height:40px;
background-color:#F00;
Sumit Gera
  • 1,249
  • 4
  • 18
  • 34
1

you could try: 

    <div style="width:50%; padding: 15px; text-align: center; ">
Lorem ipsum...<div style=" display:inline; float:right;">ASDF!</div>
</div>

It worked in a quick mock up I just did.

Aaron Dartt
  • 29
  • 2
  • So... I tried it, and it didn't work for me: http://jsfiddle.net/w5bfY/1/ Note how the green is too big (first time I've seen that problem), and the lorem ipsum is still too far left. (at least for me: http://i.imgur.com/tS680.png ) – user992364 Nov 25 '12 at 05:15
1

This is actually not as complicated as it seems. You just need to remove the right-aligned div from the normal flow and position (align) it on the right of the text container. (All the commented-on lines of CSS in the demo are necessary; the rest are for demonstrative purposes.)

The advantage to this solution is that the container and text elements flow normally, and it uses the same HTML structure as your example.

Demo:

View Demo >> http://pasteboard.s3.amazonaws.com/images/1U5yFIwE.png

Basic code:

#text {
  margin: auto; /* aligns #text to the center of #container */
  text-align: center; /* self-explanatory; aligns text to the center */
  position: relative; /* needed so that the position of #right is relative to #text, not the body */
}

#right {
  display: inline-block; /* allows #right to display on the same line as the text in #text while still acting like a block element (block: p, div, etc.) */
  position: absolute; /* removes #right from the normal flow, and positions it in the top-left of #row */
  right: 0; /* aligns #right 0px away from the right side of #text */
}

Image: demo image

Ian
  • 5,704
  • 6
  • 40
  • 72
0

I have done with little bit css works.,

Code Samples For HTML :

<div class="MainContainer"><p>Lorem ipsum...</p><div style="float: right;">ASDF!</div></div>

Code Samples For CSS :

.MainContainer{
    width : 50%;
    padding : 15px !important;   
    text-align : center !important;
    border : 15px solid #000;
    position : absolute;   
}

.MainContainer div { margin-top : -7%; text-align:center !important;}

To See it in Action :

http://jsfiddle.net/john_rock/tZzwA/

I think this may help you to resolve your problem.

John Peter
  • 2,870
  • 3
  • 27
  • 46
0

As others have said, you need to free the second div from the flow and then reposition it. Set absolute top same as your padding to restore correct vertical position. Try this, (not the same as Karacas), see second view to show that centering is correct:

<div style="border:1px solid red;width: 50%; padding: 15px; text-align: center;position: relative;">
    Lorem ipsum...
    <div style="position: absolute;right: 0;top: 15px;">ASDF!</div>
</div>
<div style="border:1px solid red;width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

http://jsfiddle.net/huuanito/8N9BT/

sdjuan
  • 709
  • 6
  • 15
0

The code you have as it is will pretty much work with just a few small changes.

  1. The second div needs to be independent and not nested within the first one.
  2. The first `div' need to float to the left, and the second one towards right.

Thats pretty much it.

    <div style="width:50%; padding:15px; text-align:center; float:left;">
     Lorem ipsum...
 </div>

 <div style="float:right;">
     ASDF!
 </div>

Try It!

Sayan
  • 2,053
  • 3
  • 25
  • 36