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>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>old school table
<table cellpadding="0" cellspacing="0"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr>
</table></div>
<br/>
<div> float:left <div> <div>A</div> <div>B</div> <div>C</div> </div>
</div>
<br/>
<div>ul / li <ul> <li>A</li> <li>B</li> <li>C</li> </ul>
</div>
<br/>
<div> display:inline <div> <div>A</div> <div>B</div> <div>C</div> </div>
</div>
</body>
</html>3 Answers
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>old school table
<table cellpadding="0" cellspacing="0"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr>
</table></div>
<br/>
<div> float:left <div> <div>A</div> <div>B</div> <div>C</div> </div>
</div>
<br/>
<div>ul / li <ul> <li>A</li> <li>B</li> <li>C</li> </ul>
</div>
<br/>
<div> display:inline <div> <div>A</div> <div>B</div> <div>C</div> </div>
</div>
</body>
</html>I believe percentages are the only way to achieve a similar structure. Here:
<div>
<span>I am text on grey</span>
<span>displays top</span>
<span>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.
It is 2015 and CSS3 flexbox is supported by IE10+, Safari 6+. I've made a pure CSS implementation of HBox and VBox - . It is saving me a lot of hours at work.
In this particular case, it could be used as follows:
<div> <div>A</div> <div>B</div> <div>C</div>
</div>
