Advanced CSS layout problem
Posted
by Tower
on Stack Overflow
See other posts from Stack Overflow
or by Tower
Published on 2010-03-15T12:40:41Z
Indexed on
2010/03/15
12:49 UTC
Read the original article
Hit count: 798
Hi,
I want to create a dialog with a title, borders (left, right, bottom) as well as the content. The current source code:
<html>
<body>
<div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table">
<div style="display: table-row;">
<div style="background: #f00; width: 100%; display: table-cell;height: 24px;">top</div>
</div>
<div style="display: table-row;">
<div style="background: #0f0; width: 100%; display: table-cell;">
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>
<div style="display: table-cell;">
<div style="overflow: scroll; white-space: nowrap">
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br />
</div>
</div>
<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div>
</div>
</div>
</div>
</div>
<div style="display: table-row;">
<div style="background: #000; width: 100%; display: table-cell; height: 4px;"></div>
</div>
</div>
</body>
</html>
produces an output of
what happened to the left and the right borders and why does the size exceed the width specified in the top parent (152px)?
© Stack Overflow or respective owner
