ansaurus

Question

Answer 1

+1 A:

You could try something like:

#d2 {
    height: 1em;
    overflow: hidden;
}

But you already specified that that might not work.

Anyway, it´s not something I would ever try because you are required to specify a width when you float an element.

Another solution would be to use javascript to calculate and set the widths dynamically.

Edit: Another solution would be to set text-align:right to your container and display:inline to d1 and d2. That way you could try to style d2 without breaking css standards.

Third solution: You can also try to position MemberName absolute inside d1 or d2 (the left one). That way you can give d1/d2 a fixed width (=good for a float) and MemberName will run out of the screen on the left side automatically.

jeroen 2009-02-14 13:23:53

Thanks a lot for your answer, I guess I should've been more specific, actually it's all one line (in terms of display) but d1 (the one on the right) contains links which are floated left in order to have top and bottom padding and a background image.

Waleed Eissa 2009-02-14 14:51:04

Answer 2

A:

Try this:

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    .container { border: 1px solid black; overflow: hidden; white-space: nowrap; text-align: right; }
    .container div { display: inline; }
    .d1 { background: yellow; }
    .d2 { background: #DDD; }
  </style>
</head>
<body>
<table>
<div class="container" style="width:300px">
  <div class="d1">this is the content of the first div</div>
  <div class="d2">this is the content of the second div</div>
</div>
<div class="container" style="width:300px">
  <div class="d1">first div</div>
  <div class="d2">second div</div>
</div>
</body>
</html>

cletus 2009-02-14 13:27:58

Thanks a lot for taking the time to answer my question but actually d2 is the one on the left not the right (it comes second after d1 which is float: right too).

Waleed Eissa 2009-02-14 14:45:57

Ah true. Just reverse their order.

cletus 2009-02-14 14:47:47

The problem is that I can't reverse their order, see the image above

Waleed Eissa 2009-02-14 15:25:10

ansaurus

tags:

views:

answers:

A question about overflow: hidden

related questions