I have two divs with float: right:
<div id="container" style="width:760px">
<div id="d1" style="float:right;"></div>
<div id="d2" style="float:right;"></div>
</div>
I want to hide any overflow in d2 if the contents of both divs get too wide to fit in their container (it all should be one line that must not wrap on a second line). As you may have guessed, the width of the contents is not fixed, and as you know overflow: hidden doesn't work if the width is not specified.
Thanks in advance for any suggestions ...
Edit: After reading the comment of tharkun, I thought I probably should clarify more what I'm trying to achieve so I created this draft:
As you can see in the image above, I have a member menu (the links in the member menu differ slightly from time to time - to notify the member of some events), also as you see in the image, the member name is displayed next to the menu, as the member name is chosen by the member it varies in width from one member to another and I'm worried it could become too wide for some members which will cause the member name to be displayed below the menu not to the left of it, so, in case the member name is too long I want to hide a part of it (using overflow: hidden) so that it fits on stays on the same line.
-
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.
Waleed Eissa : 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. -
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>Waleed Eissa : 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).cletus : Ah true. Just reverse their order.Waleed Eissa : The problem is that I can't reverse their order, see the image above
0 comments:
Post a Comment