ansaurus

Question

text-align:center and short floated divs

Answer 1

+1 A:

Depending on your page, if both divs are in a single container and there's nothing below the right div (letting it stretch all the way down):

<div style="float:right; height: 100%;">
A line of text, floating to the right
</div>
<div style="text-align:center;">
And here, several lines of<br />
text which I want to center.
</div>

If you have additional restrictions this doesn't meet please add them to the question so we can get a better solution.

Update: based on your comment...

CSS:

.divWrapper div { height: 100%; }

HTML:

<div class="divWrapper">
<div style="float:right; height: 100%;">
A line of text, floating to the right
</div>
<div style="text-align:center;">
And here, several lines of<br />
text which I want to center.
</div>
</div>

Nick Craver 2009-08-16 12:35:47

As I said, unfortunately I cannot change the floating div at all. As far as I am concerned, it is read-only.

tetromino 2009-08-16 12:42:30

Yeah, height needs to be set. If not, the rest of the page will flow around the div. Kinda like a pebble in a flow of water. If remains in place and all the water flows around it. Unless you have a bigger pebble ofcourse :p

WebDevHobo 2009-08-16 12:52:44

If you have control over the div wrapping it, via CSS you can apply a height: 100%; to both divs, via something like:.divWrapper div { height: 100%; }Is this possible?

Nick Craver 2009-08-16 12:54:10

Nick: interesting idea. I think I might be able to get that to work.

tetromino 2009-08-16 13:17:59

Answer 2

A:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <style type="text/css" media="all">

    #d1 {float: right;
        clear: left;
        width: 24%; /* it should fit inside the 25% margin between right-side of div #2 and the boundary of the page with a small (1%) gutter between the two divs */
    }

    #d2 {width: 50%;
        position: absolute;
        top: 0; /* or whatever... */
        left: 50%; /* used in conjunction with margin to centre the div */
        margin: 0 0 0 -25%; /* moves div left */
    }

</style>
</head>

<body>

    <div id="d1">
    A line of text, floating to the right
    </div>

    <div id="d2">
    And here, several lines of<br />
    text which I want to center.
    </div>

</body>

</html>

demo page: here

Having had my attention drawn to the following:

Now, what makes this a problem is that I cannot change the floating div; I only control the second div with the text that I want to center. Furthermore, I do not necessarily know the floated div's width and height. I cannot use javascript. I cannot use absolute positioning because I don't have any control over the parent blocks, and I don't know which of them have non-static positioning. And I really don't want to use a table, unless there is no other alternative.

#d2 {clear: both;
width: 50%;
margin: 0 0 0 25%;
}

#d1 {clear: both;
float: right;
}

This sort-of achieves your aims, but it means that both divs will not be horizontally-adjacent; they'll be where you want them, but on different horizontal levels.

David Thomas 2009-08-16 12:39:38

That would be a good solution if I could use absolute positioning. But as I said, unfortunately I cannot use absolute positioning because I don't have control over the containing blocks.

tetromino 2009-08-16 12:47:11

And that's one of the reasons I asked, originally, about a link to a/the demo page; to see what you have to work with. Though I have to apologise, I hadn't seen the requirements regarding no `absolute` positioning when I posted.

David Thomas 2009-08-16 13:00:53

Answer 3

A:

Changing the display style to block instead of inline might help, setting the float style left might also help. You can also do both.

This will be a pain to get right though because different browsers will handle this case differently.

Ruud v A 2009-08-16 13:15:13

Answer 4

+1 A:

Set the width of the centered div to 50% and use margin:0 auto to center it.

   <div style="float:right">
        A line of text, floating to the right
    </div>
    <div style="width:50%;margin:0 auto;text-align:center">
        And here, several lines of<br />
        text which I want to center.
    </div>

Depending on the length of your text, you may have to adjust with the width %.

Emily 2009-08-16 14:09:58

Thank you! That solves the problem.

tetromino 2009-08-16 20:20:48

ansaurus

tags:

views:

answers:

text-align:center and short floated divs

related questions