tags:

views:

1623

answers:

1

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?

+2  A: 

What you need to do here is to apply a margin to div#c which matches the widths of the div#a and div#b

Take the below for example;

<style>
.DivA {width:250px; float:left;}
.DivB {width:150px; float:right;}
.DivC {margin-left:260px; margin-right:160px;}
</style>

<div class="DivA" />
<div class="DivB" />
<div class="DivC" />

You will have noticed that i have added extra 10px to each width, this is just to allow for more spaced between the elements, of course you will also need to clear these ideally also.

This would then give you two fixed columns on either side and a center element which would take up any free space.

Phunky
In this way, the "center" is pushed down to next line if the browser window is narrow.
Morgan Cheng
Indeed, that is very true so the use of a min-width on the container or .DivC would be recommended.When ever you use floats you will always be able to resize the browser to a point where it will break the layout, unless you use fixed widths at some point.
Phunky