4

I'm an old school tables guy, and am pretty baffled when it comes to modern HTML. I'm trying to something as simple as vertical / horizontal layouts (i.e. Flex's hbox/vbox), but am having major difficulty replicating them.

An old table would look something like this for an HBox:

<table width="100%" height="100">
    <tr valign="middle">
        <td nowrap style="background-color:#CCC">I am text on grey</td>
        <td width="50%" valign="top">displays top</td>
        <td width="50%" align="right">Autosize Fill (displays bottom right)</td>
    </tr>
</table>

Now I'm trying to do this with div's, but to no avail. When using display:inline, I cannot set a percentage width -- it only takes explicit widths. When using float:left, settings 100% percentage width causes it to really be 100% and pushes the next div down.

Here's the code I've been playing with:

<html>
<head>
</head>
<style type="text/css">
div.test { background-color: #EE9; padding:5px;}
body { font-family: Arial; }

ul {
    list-style-type:none;
}

ul li {
    float:left;
}

.hboxinline div {
    display: inline;
}

.hboxfloat div {
    float:left;
}

.cellA {
    background-color:#CCC;
    width:100%;
}
.cellB {
    background-color:#DDD;
    min-width:100;
}
.cellC {
    background-color:#EEE;
    min-width:200;
}

</style>

<body>
A = 100%, b = 100, c = 200

<div class="test">old school table
<table cellpadding="0" cellspacing="0">
    <tr>
        <td class="cellA">A</td>
        <td class="cellB">B</td>
        <td class="cellC">C</td>
    </tr>
</table></div>

<br/>

<div class="test">
    float:left
    <div class="hboxinline">
        <div class="cellA">A</div>
        <div class="cellB">B</div>
        <div class="cellC">C</div>
    </div>
</div>

<br/>

<div class="test">ul / li
    <ul class="ulli">
        <li class="cellA">A</li>
        <li class="cellB">B</li>
        <li class="cellC">C</li>
    </ul>
</div>

<br/>

<div class="test">
    display:inline
    <div class="hboxfloat">
        <div class="cellA">A</div>
        <div class="cellB">B</div>
        <div class="cellC">C</div>
    </div>
</div>


</body> 
</html>
ansiart
  • 2,563
  • 2
  • 23
  • 41

3 Answers3

2

Why not use what you want? 

<html>
<head>
</head>
<style type="text/css">
div.test { background-color: #EE9; padding:5px;}
body { font-family: Arial; }

ul {
    list-style-type:none;
    padding: 0;
    margin: 0;
}

ul li {
}

.hboxinline div {
}

.hboxfloat div {
}

.cellA {
    background-color:#CCC;
    width:100%;
}
.cellB {
    background-color:#DDD;
    min-width:100;
}
.cellC {
    background-color:#EEE;
    min-width:200;
}
.inlineCell {
    display: table-cell;
}

</style>

<body>
A = 100%, b = 100, c = 200

<div class="test">old school table
<table cellpadding="0" cellspacing="0">
    <tr>
        <td class="cellA">A</td>
        <td class="cellB">B</td>
        <td class="cellC">C</td>
    </tr>
</table></div>

<br/>

<div class="test">
    float:left
    <div class="hboxinline">
        <div class="cellA inlineCell">A</div>
        <div class="cellB inlineCell">B</div>
        <div class="cellC inlineCell">C</div>
    </div>
</div>

<br/>

<div class="test">ul / li
    <ul class="ulli">
        <li class="cellA inlineCell">A</li>
        <li class="cellB inlineCell">B</li>
        <li class="cellC inlineCell">C</li>
    </ul>
</div>

<br/>

<div class="test">
    display:inline
    <div class="hboxfloat">
        <div class="cellA inlineCell">A</div>
        <div class="cellB inlineCell">B</div>
        <div class="cellC inlineCell">C</div>
    </div>
</div>


</body> 
</html>
jcolebrand
  • 15,889
  • 12
  • 75
  • 121
  • because of this thread: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html I'm trying to figure out how to be "modern" for posterity sake ... – ansiart Jun 02 '10 at 20:26
  • oops i didn't see you had put something in. that works well so far in Chrome, will test the others .... thanks! – ansiart Jun 02 '10 at 20:29
  • Well ie doesn't like it -- but it looks as though everything else does .... marking answered – ansiart Jun 02 '10 at 20:31
  • Yeah, IE doesn't like many things... :p ~ Are you using IE7 or IE8 in compat mode? Should work in IE8 normal and IE9 – jcolebrand Jun 02 '10 at 21:03
0

I believe percentages are the only way to achieve a similar structure. Here:

<div class="table">
<span class="left">I am text on grey</span>
<span class="mid">displays top</span>
<span class="right">Autosize Fill (displays bottom right)</span>
</div>

and

.table {
  width:100%;
  line-height:100px;
  position:relative;
}
.left {
  width:10%;
  background-color:#CCC;
  display:inline-block;
}
.mid {
  width:10%;
  display:inline-block;
  position:relative;
  vertical-align:text-bottom;
}
.right {
  width:79%;
  text-align:right;
  vertical-align:text-top;
  display:inline-block;

}

Will get you somewhat close.

edl
  • 3,194
  • 22
  • 23
0

It is 2015 and CSS3 flexbox is supported by IE10+, Safari 6+. I've made a pure CSS implementation of HBox and VBox - https://gist.github.com/Munawwar/7926618. It is saving me a lot of hours at work.

In this particular case, it could be used as follows:

<div class="hbox">
  <div class="flex">A</div>
  <div style="min-width: 100px;">B</div>
  <div style="min-width: 200px;">C</div>
</div>
Munawwar
  • 1,712
  • 19
  • 14