In article <>,
richard <> wrote:
> Playing around with this I come to find out it has a problem with breakage.
> Specially with IE. In FF the container and contents are shown as desired,
> but breaks upon window narrowing. IE shows a broken box. At least in my
> editor it does anyways. Is there something I'm missing with the use of
> table-cell?
>
> No url. You copy and paste into your own editor.
>
YES SIR! THREE BAGS FULL, SIR! > > > <body>
>
> <div id="container" style="display:table-cell; border:solid 2px #f00;">
> <div id="box1" style="display:table-cell; float:left; width:100px;
> padding:10px; border:solid 2px #ff0;">
> hello
> </div>
>
> <div id="box2" style="display:table-cell; float:left; width:100px;
> padding:10px; border:solid 2px #00f;">
> goodbye
> </div>
>
> </div>
> </body>
What induces you to declare display as table-cell but then float. Why
would you display the containing div as a *cell*. Am I going mad or is
it you?
This looks more sensible to my crazy brain:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>One Way</title>
</head>
<body>
<div id="container" style="display:table; border:solid 2px #f00;">
<div id="box1" style="display:table-cell; width:400px;
padding:10px; border:solid 2px #ff0;">
Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
eleifend convallis, diam augue blandit magna. Cras vel eros. Vivamus sed
odio et orci tincidunt ornare. Duis dui lectus, commodo ut, gravida id,
ultricies quis, tellus. Vestibulum blandit nibh eget turpis. Quisque
mollis, lacus consectetur eleifend convallis, diam augue blandit magna.
Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui
lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum
blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend
convallis, diam augue blandit magna.
</div>
<div id="box2" style="display:table-cell; width:200px;
padding:10px; border:solid 2px #00f;">
Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus consectetur
eleifend convallis, diam augue blandit magna.
</div>
</div>
<div id="container" style="display:table-cell; border:solid 2px #f00;">
<div id="box1" style="display:table-cell; float:left; width:100px;
padding:10px; border:solid 2px #ff0;">
hello
</div>
<div id="box2" style="display:table-cell; float:left; width:100px;
position:relative;left:30px; /* <---- my addition to his stuff */
padding:10px; border:solid 2px #00f;">
goodbye
</div>
</div>
</body>
</html>
As for IE, you cannot expect IE to respect display: table-cell and many
other such things. Use a real table and be done.
--
dorayme
===================
Sorry about the "Edit Message as New", but I wanted your markup
unaltered but with his original, plus my addition - all included. I hope
it works in your (broken?) news reader.
You correctly pointed out that the floats were superfluous in his
example, however, note that with my addition I demonstrate its usage if
the float were to be repositioned anywhere from its only two normal
float states (left and right).
This also gives the answer/corrects another thread in CIWAS (My VALID
page:....) wherein GTalbot states "Float and position should never go
together" and Ben C responds with "Why not?" - GTalbot has not answered
so far.
--
Gus
Similar Threads
