[RESOLVED] Fix Display:Block with Tables!?!?

ednark

I am running into a with issue with block elements.
I would like my divs to expand their width to their content, like inline elements.
It seems that right now I can only deal with 100% width, or set a fixed absolute width on block elements.
The only other stipulation is that i need to use margin/padding on them as well, which knocks out using inline.
There has got to be a better simpler way to do this.

Things I have tried:
1) Make my divs inline or use spans:
Doesn't work as then it begins ignoring margin/padding.

2) Wrap my divs in a table:
This gives me the effect I want but I feel all dirty doing it.

Won't Work

<div style="border: solid 1px red; padding: 14px; display: inline;">
  DIV
</div>

Solution :queasy:

<table cellspacing="0" cellpadding="0"><tr>
<td><div style="border: solid 1px red; padding: 14px;">
  TABLE/TR/TD/DIV
</div></td>
</tr></table>

JPnyc

display inline and float them left. If need be, put a containing div around all of em.

Ichiro

Is the "display inline" for IE because it should be redundant for floated elements, unless their float value is "none", which itself would be redundant?

ednark

Thanks a lot!

I'm still not 100% sure how/why this is the fix, but it works as desired from FF2.0 down through IE5.01.

Here is my test code which yields the propper formatting.

P.S. I did have to throw in a container SPAN around my guys with a clear BR, but thats more acceptable than a table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.padded {
  border: solid 1px red;
  padding: 14px 28px 14px 28px;
}
span.padded {
  margin-top: 24px;
  margin-bottom: 24px;
}
.fixed {
  display: inline;
  float: left;
  border: solid 1px red;
  padding: 14px 28px 14px 28px;
}
</style>
</head>
<body>

<h3>Border Only</h3>

<h5>DIV &amp; SPAN</h5>
<div style="border: solid 1px red;">
  ONE
</div>
<span style="border: solid 1px red;">
  TWO
</span>

<h5>DIV &amp; TABLE</h5>
<div style="border: solid 1px red;">
  ONE
</div>
<table cellspacing="0" cellpadding="0" ><tr><td><div style="border: solid 1px red;">
  TWO
</div></td></tr></table>




<h3>Inline ignores margin Problem</h3>

<h5>DIV &amp; SPAN</h5>
  <div class="padded">
    ONE
  </div>
  <span class="padded">
    TWO
  </span>

<h5>DIV &amp; TABLE</h5>
<div class="padded">
  ONE
</div>
<table cellspacing="0" cellpadding="0" ><tr>
<td><div class="padded">
  TWO
</div></td>
</tr></table>




<h3>Fixed : css/display:inline;float:left;</h3>

<h5>DIV &amp; SPAN</h5>
<span style="border: solid 1px black;">
  <div class="fixed">
    ONE
  </div>
  <span class="fixed">
    TWO
  </span>
  <br style="clear:left" />
</span>

<h5>DIV &amp; TABLE</h5>
<div class="fixed">
  ONE
</div>
<table cellspacing="0" cellpadding="0"><tr>
<td><div class="fixed">
  TWO
</div></td>
</tr></table>

</body>
</html>