ansaurus

Question

Answer 1

+4 A:

If you're going to use a table, use a table. Setting the display of block elements to mimic various table elements is problematic at best, and very unpredictable cross-browser.

Robusto 2010-03-15 12:44:25

Answer 2

+1 A:

You are using too many inline rules, try separating them using CSS selectors, classes and ids to divs, use tables appropriately.

Some rules are canceling out others that's why you don't see borders.

Lex 2010-03-15 12:46:36

Answer 3

+1 A:

Sorry but your HTML code is a horrible mess of tag soup reminiscent of the early 90s.

For your exact problem, the width is larger because of your rule white-space: nowrap which stretches the table. And this is what's likely removing the borders - there is no content in those "cells" so they collapse to a zero width.

Like Robusto said, if you want a table, use a table. If you want a dialog-like box, you definitely don't need all those nested div tags. Just have your outer one and use the border rule to set the borders:

<div style="border:4px solid #000; border-top:0; background:#0ff; width:152px; height:112px;">
    <h2 style="background:#f00;">top</h2>
    cwe cwe cwe cwe...
</div>

DisgruntledGoat 2010-03-15 12:55:31

Answer 4

A:

You don't have to use all these divs to begin with. You can simplify your HTML drastically:

<div>
  <h1>top</h1>
  <div>
    <p>cwe cwe cwe</p>
    <p>cwe cwe cwe</p>
  </div>
</div>

and still easily apply all the styling you need. No need to create a div for each border. That's what the CSS attributes border-left, border-right, border-bottom and border-top are there for (and these are supported by ancient browsers, unlike display: table).

From what I see, you don't have an advanced problem, you're deliberately turning a very simple problem into an advanced one.

RegDwight 2010-03-15 12:58:39

Answer 5

A:

the scrolling is not caused by the sizing, its caused by you forcing the Scroll value in overflow. In my experience, setting it to scroll shows the scrollbars all the time - albeit in their disabled state. try setting the overflow to auto

<div style="overflow: auto; white-space: nowrap">

Mauro 2010-03-15 13:04:18

ansaurus

tags:

views:

answers:

Advanced CSS layout problem

related questions