Very very simple align problem ...

[12inch]

I have one DIV.
In this DIV I have an image and text on the left side.
But on the right side I want also text or an image.

When I put, for example, the text in a span (text-align: right;), then nothing happens. When I say margin-right: 0, also nothing happens.

When I say float: right, then the content doesn't stay in the DIV, but it moves outside the DIV. Then I use a spacer DIV (clear: both), but this doens't work also. Then I can't see then content anymore.

This seems very buggy for a very simple thing.

Does anyone know how to solve this problem?

[eric258]

Why not use two divs? Is the content of both sections such that it needs to be structurally in the same div? Float the two divs right.

Don't use spacer divs - reminds me too much of spacer.gif hell of table layouts...

Someone might have a better idea than I, but not knowing any more, I'd split it into two divs, or two div classes.

[12inch]

I use a 3 column layout.

And I want to align the text left and right in the column in the middle. So if I float this to the right, it will mess up my layout.

[BlobFisk]

Hey 12inch,

Are you trying to achieve a 2-column type layout in your <div>, or just have a paragraph of text and/or images aligned to the right?

When I put, for example, the text in a span (text-align: right;), then nothing happens. When I say margin-right: 0, also nothing happens.

Don't forget that <span> is an inline element - if you used <p style="text-align:right;">...</p>, then this should work as <p> is a block level element.

It all depends on the naswer to my first question above!

[12inch]

Hi BlobFisk,

This is what I'm trying to achieve. I have one DIV, with text on the left and text on the right.

span.left {text-align: left; }
span.right {text-align: right; }

<div id="container">
<span class="left">text on the left</span>
<span class="right">text on the right</span>
</div>

But this doesn't work. I have also tried the P-tag instead of the SPAN-tag, but then you have two block-level elements, so they don't stay on one line.

[grahamstewart]

When I put, for example, the text in a span (text-align: right;), then nothing happens.

As BlobFisk correctly point out <span> is an inline element so you can't use text align on it.

.left {
float: left;
}
.right {
float: right;
}

..will work.

If the #container div has no other content and you want it to (appear to) contain these floats then you could just add a &nbsp; before the </div>

Or you can set clear:both on your next bit of content (but beware the IE peek-a-boo bug [positioniseverything.net])

Alternatively just float one of the spans like this..

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

[BlobFisk]

You could try using 2 div's here, in a similar way to how you used your spans - setting the display level to inline and the width of each to 50%. Then, the text-align would be left and right respectively for each layer.

This is untested, but may work...

[12inch]

Your alternative method works:
.left {
float: left;
}
.right {
display: block;
text-align: right;
}

Only then the text on the right is not visible. If I click and move my mouse then I see the text, but it is not visible. And I have also add a <div style="clear: both;"></div> before the end of the container div.

I also tried it with 2 inline DIVs with a width of 50%. This doesn't work unfortunately.

[BlobFisk]

I'm beginning to think 12inch, that you may be better off moving from a 3 column layout to a 4 column layout. That way you can achieve the text alignment that you are looking far more easily?

[grahamstewart]

If I click and move my mouse then I see the text

Yup - thats the "peek-a-boo" bug - see the link above.

You shouldn't need a clear:both with the second method - or with the &nbsp; method.

[12inch]

The reason why I don't use floating left and right, is because I have a 3 column layout. The left column is the navigation, the middle is the content and the right column is for graphics.
If I use floating right, then it goes beyond the middle column.

The text in the containerDIV is the head of the content.

But your alternative method works, only the text has disappeared. Only if I select it, then it is visible. Are you sure this is the Peek-a-boo-bug? I thought this only happens with links. Because my text on the right (span class="right") isn't a link.

[12inch]

When I use <div style="clear: both;"></div> then I don't see the text. But when I use <div style="height: 0;"></div> I can see the text only then you have extra space.

If I put it before the end of the container, then I have extra space below the text. Is there a workaround to remove this extra space?

[12inch]

It WORKED with float left and right. Only then I have to add a clearDIV, otherwise the content won't fit in the box. But this works in IE6, but not in IE5/Win.

In IE5 I have a lot a extra space below the text.

The code:

div.left {float: left; }
div.right { float: right;}

<div id="container">
<div class="left">text on the left</div>
<div class="right">text on the right</div>
</div>