CODEWITHSUNDEEP
csspositionoverflow
Fluidbyte
Fluidbyte

Reputation: 5210

Make inner element align right on overflow

I have a div inside a div. The .outer div has overflow set to hidden and is 200px wide. The .inner div is 300px wide and hides fine per the overflow spec.

What I'd like to do is find a way to align the inner div so that it cuts off the overflow on the left side instead of the right.

I could use positioning and negative margins but ultimately the inner div is variable width, so I'm hoping there's a way to accomplish this without 'hard-coding' anything?

Here's the fiddle: http://jsfiddle.net/xCYPc/

Upvotes: 0

Views: 899

Answers (3)

Nelson Benítez León
Nelson Benítez León

Reputation: 50563

Just add direction: rtl to your .outer div, see working fiddle

From http://www.w3.org/wiki/CSS/Properties/direction :

The direction property specifies the base writing direction of blocks and the direction of embeddings and overrides for the Unicode bidirectional algorithm.

Also, it specifies the direction of table column layout, the direction of horizontal overflow, and the position of an incomplete last line in a block in case of 'text-align: justify'.

Upvotes: 1

Luiz Sócrate
Luiz Sócrate

Reputation: 136

Make .outer position:relative and .inner position:absolute;right:0. That will keep the inner div aligned right regardless of its width.

Upvotes: 0

J Max
J Max

Reputation: 2381

Try setting float: right; on the .inner

Upvotes: 2

Related Questions