CSS "table" display - semantics help

[Shadowfox]

Hello everybody,
here's the situation:

I have a <DIV>.
In concern to the layout I wish it to have a minimum of 400px left border.
However, I wish it to retain its content-sensitive auto-expand ability.

That I achieve here:

float: left;
display: table;
width: 500px;
height: 400px;
border-left: 1px solid #ececec;

As far as I know, the "table" display of a page layout DIV interferes with the semantics rules. Thus, it would be similar to making the layout with a <table> tag.

So, is there a workaround for the same functionality?

Thank you very much!

[harbingerOTV]

Do you mean a minimum height of 400px?

if so:

div {
float: left;
width: 500px;
min-height: 400px;
border-left: 1px solid #ececec;
}

then for IE lte 6

<!--[if lte IE 6]>
<style type="text/css" media="screen">
div {
height: 400px;
}
</style>
<![endif]-->

Older IEs consider height the same as minimum height.

[rmedek]

Originally Posted by Shadowfox

As far as I know, the "table" display of a page layout DIV interferes with the semantics rules. Thus, it would be similar to making the layout with a <table> tag.

No, the only thing that affects the semantics of a document is the HTML, not the CSS. So, making a <div> have display:table or a <table> have display:block won't affect the HTML at all.

That's one reason why display:table is available in the first place—to give elements the visual behavior of a table while allowing the proper element to be used for good semantics.

[Apostropartheid]

Except IE doesn't utilise it. Great...

[Shadowfox]

Thank you very much!