I have a web design requirement to have a header like this:
+-------------------------------------------------------------+
| +---------------------+ +-------++------------------------+|
| | float left DIV A | | DIV C || float right DIV B ||
| +---------------------+ +-------++------------------------+|
+-------------------------------------------------------------+
The header has 3 parts: Div A, B, C. The DIV A is float to left, while DIV B and C is float to right. DIV A and DIV B might contain long text. So overflow-ed text are truncated as ellipsis. DIV C has short text, its content should not be truncated.
I tried to make HTML like below:
<html>
<head>
<style>
.header
{
width: 100%;
border: 2px red;
overflow: hidden;
}
.DivA
{
float: left;
}
.DivC
{
float: right;
white-space:nowrap;
}
.DivB
{
float: right;
}
.clear
{
clear: both;
}
.DivA, .DivB
{
width: 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="header">
<div class="DivA">
Hello world 1 Hello world 2 Hello world 3
Hello world 1 Hello world 2 Hello world 3
Hello world 1 Hello world 2 Hello world 3
</div>
<div class="DivB">
Good bye Good bye
Good bye Good bye
Good bye Good bye
</div>
<div class="DivC">
No Ellipsis
</div>
<div class="clear">
</div>
</div>
</body>
</html>
The text-overflow:ellipsis only works if DIV A and DIV B have width(in my case, I set them to be 45%).
However, there is one problem about DIV C. Since DIV C's width might be different in different localization, we cannot set its width explicitly. When narrowing down the browser window, the div C can be wrapped to next line. This looks bad.
Is there any way to make DIV A and DIV B float to left and right respectively with overflow ellipsis, while at the same time DIV C can adapt to its best width?