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: 761

Filed under:
|
|
|

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

alt text

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

Related posts about css

Related posts about html